jQuery表单序列化方法serialize(),serializeArray()

利用ajax与后台数据交互时需要提交大量的input输入值，可利用form的serialize(),serializeArray(),serializeObject方法，但是注意name值需要与后台字段保持一致：

form表单

<form action="">
    <input type="text" name="username1">
    <input type="text" name="address1">
    <input type="text" name="age1">

    <input type="text" name="username2">
    <input type="text" name="address2">
    <input type="text" name="age2">
</form>
 
<button class="serialize">serialize</button> 
<button class="serializeArray">serializeArray</button>
<button class="serializeObject">serializeObject</button>

serialize方法
  serialize方法可以将表单序列化成一个拼接的字符串形式。

$(".serialize").click(function(){ 
　　var data = $("form").serialize(); 
　　console.log(data); 
})

结果：

username1=a&address1=b&age1=c&username2=d&address2=e&age2=f

serializeArray方法
  serialize方法可以将表单序列化成一个特殊的json数组,带有name和value的json。

$(".serializeArray").click(function(){
    var data = $("form").serializeArray()
    console.log(data);
})

结果：

Array(6)
    0: {name: "username1", value: "a"}
    1: {name: "address1", value: "b"}
    2: {name: "age1", value: "c"}
    3: {name: "username2", value: "d"}
    4: {name: "address2", value: "e"}
    5: {name: "age2", value: "f"}

将数组进行简单处理：

$(".serializeArray").click(function(){
    var data = $("form").serializeArray()
    var newdata ={}
    data.map(function(val,key){
        newdata[val.name]=val.value;
    })
    console.log(newdata);
})

结果：

{username1: "a", address1: "b", age1: "c", username2: "d", address2: "e", …}

serializeObject方法

$(".serializeObject").click(function(){
    var data = $("form").serializeObject()
    console.log(data);
})

结果：

{"username1": "a"," address1": "b"," age1": "c", "username2": "d", "address2": "e", …}