jQuery serializeArray()的例子

下面是关于jQuery serializeArray()方法的详细攻略：

什么是serializeArray()方法？

在介绍serializeArray()方法之前，先来了解一下序列化表单数据的概念。
在向服务器提交表单数据时，服务器需要对表单数据进行处理。而序列化表单数据就是将表单数据转化为一种字符串格式，方便服务器传递和处理。jQuery库提供了serialize()和serializeArray()两个方法来序列化表单数据。其中$(selector).serialize()方法可以将表单数据序列化为字符串形式，而$(selector).serializeArray()方法则可以将表单数据序列化为一个JSON数组形式。

如何使用serializeArray()方法？

serializeArray()方法的基本语法是：

$(selector).serializeArray();

其中，selector选择器用于找到需要序列化的表单元素，可以是表单元素的ID、class、标签名等。

示例1：打印序列化后的结果

下面是一个简单的示例，演示了如何使用serializeArray()方法将表单数据序列化为JSON数组，并在控制台中输出序列化后的结果：

<html>
  <body>
    <form id="myForm">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name"><br><br>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email"><br><br>
      <button type="button" onclick="serialize()">Serialize</button>
    </form>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
      function serialize() {
        var formData = $('#myForm').serializeArray();
        console.log(formData);
      }
    </script>
  </body>
</html>

这个示例中，我们定义了一个包含两个输入框的表单，并通过点击按钮的方式触发序列化操作。当点击按钮时，我们调用了serialize()函数，将表单数据序列化为JSON数组，并使用console.log()函数输出序列化后的结果。可以发现，输出结果为：

[
  {
    name: "name",
    value: "John"
  },
  {
    name: "email",
    value: "john@example.com"
  }
]

示例2：发送序列化后的表单数据

下面是一个完整的示例，演示了如何使用serializeArray()方法将表单数据序列化为JSON数组，并将数据通过Ajax方式发送到服务器：

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  </head>
  <body>
    <form id="myForm">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name"><br><br>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email"><br><br>
      <button type="button" onclick="sendData()">Send</button>
    </form>

    <script>
      function sendData() {
        var formData = $('#myForm').serializeArray();
        $.ajax({
          type: 'POST',
          url: 'http://example.com/submit',
          data: JSON.stringify(formData),
          success: function(response) {
            console.log(response);
          },
          contentType: 'application/json',
          dataType: 'json'
        });
      }
    </script>
  </body>
</html>

这个示例中，我们定义了一个包含两个输入框的表单，并通过点击按钮的方式触发Ajax请求。当点击按钮时，会调用sendData()函数，将表单数据序列化为JSON数组，并将数据作为POST请求的数据发送到服务器。服务器可以通过解析JSON数据来获取表单数据。在这个例子中，我们假设服务器的接口地址为http://example.com/submit。当Ajax请求成功后，我们使用console.log()函数输出服务器返回的数据。

需要注意的是，在发送Ajax请求时，我们需要将请求的数据以JSON格式发送，因此需要使用JSON.stringify()对表单数据进行转换。同时，需要设置contentType和dataType参数为'application/json'和'json'，以确保请求和响应使用JSON格式传输和解析。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery serializeArray()的例子 - Python技术站

jQuery serializeArray()的例子

什么是serializeArray()方法？

如何使用serializeArray()方法？

示例1：打印序列化后的结果

示例2：发送序列化后的表单数据

相关文章