jQuery中serializeArray()与serialize()的区别实例分析

jQuery中serializeArray()与serialize()的区别

简介

在 jQuery 中， serialize() 和 serializeArray() 方法是用来序列化表单元素以便提交数据的。两个方法虽然有相似的地方，但是在使用它们时需要注意它们之间的区别。

serialize() 方法将表单元素的值以字符串格式进行序列化，并将这个字符串作为 AJAX 请求的数据发送给服务器。

$(document).ready(function(){
    $("button").click(function(){
        var formData = $("form").serialize();
        console.log(formData);
        //输出：firstName=John&lastName=Doe&email=johndoe%40example.com
    });
});

serializeArray() 方法则是将表单元素的值封装成一个数组对象，并返回这个数组对象。这个数组对象可以方便地在需要发送的数据中添加更多的 key-value 值，以满足提交数据的需求。

$(document).ready(function(){
    $("button").click(function(){
        var formData = $("form").serializeArray();
        console.log(formData);
        //输出：[ { name: "firstName", value: "John" }, 
        //       { name: "lastName", value: "Doe" }, 
        //       { name: "email", value: "[e-mail]" } ]
    });
});

区别

1. 返回值不同

serialize() 方法返回一个字符串形式的表单数据，而 serializeArray() 方法返回一个由对象组成数组形式的表单数据。一个方便地使用对象属性，而另一个方便地使用字符串形式进行序列化传输。

1. 格式不同

serialize() 方法传递的数据格式是以字符串的形式，如：aaa=111&bbb=222&ccc=3333，而serializeArray() 方法传递的数据格式是 JSON 数组的形式。如下代码所示：

$(document).ready(function(){
    $("button").click(function(){
        var formData = $("form").serializeArray();
        formData.push({name:"age",value:"20"});//添加键值对
        console.log(formData);//[{name: "firstName", value: "John"},{name: "lastName",value: "Doe"},{name: "email",value: "[e-mail]"},{name: "age",value: "20"}]
    });
});

示例

1. 使用serialize()传输表单数据

<form>
  <label>First Name:</label>
  <input type="text" name="firstName" value="John"><br>
  <label>Last Name:</label>
  <input type="text" name="lastName" value="Doe"><br>
  <label>Email:</label>
  <input type="email" name="email" value="[e-mail]"><br>
</form>
<button>Serialize Data</button>

<script>
  $(document).ready(function(){
      $("button").click(function(){
          var formData = $("form").serialize();
          console.log(formData);
          // 输出：firstName=John&lastName=Doe&email=johndoe%40example.com
      });
  });
</script>

1. 使用serializeArray()传输表单数据

<form>
  <label>First Name:</label>
  <input type="text" name="firstName" value="John"><br>
  <label>Last Name:</label>
  <input type="text" name="lastName" value="Doe"><br>
  <label>Email:</label>
  <input type="email" name="email" value="[e-mail]"><br>
</form>
<button>Serialize Data</button>

<script>
    $(document).ready(function(){
      $("button").click(function(){
          var formData = $("form").serializeArray();
          console.log(formData);
          // 输出：[ { name: "firstName", value: "John" }, 
          //          { name: "lastName", value: "Doe" }, 
          //          { name: "email", value: "[e-mail]" }]
      });
    });
</script>