serializearray
我们使用ajax给后台传递数据的时候，经常要获取表单的数据。表单数据不多还好说，但是如果表单字段非常多，那么无疑是非常头疼的事。如何获取大量的表单数据，是非常重要的事情。
表单页面
<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="btn1">普通方法</button>
<button class="btn2">serialize</button>
<button class="btn3">serializeArray</button>
这里只获取表单数据，暂不做提交。
普通方法
在了解序列化方法之前，我的做法是写一个js函数，把所有的input遍历一遍，组成一个对象通过ajax传递后台。
$(".btn1").click(function(){
var inputs = $("input");
var data={};
for(var i=0;i<inputs.length;i++){
var name =inputs.eq(i).attr("name");
var value=inputs.eq(i).val();
data[name]=value;
}
console.log(data);
})
返回结果
{username1: "a", address1: "b", age1: "c", username2: "d", address2: "e", …}
这样做似乎也可以达到目的，但是如果表单中存在select、checkbox等类型表单字段，那么似乎又要多写一些代码来获取了。
serialize方法
serialize方法可以将表单序列化成一个拼接的字符串形式。
$(".btn2").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。
$(".btn3").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"}
很显然我们需要处理一下这个数组，才能更好的得到我们想要的数据
数组处理
$(".btn3").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", …}
现在得到我们想要的数据了，可以放心去传递数据了，不过这还没有结束。
这段代码虽然实现了我们的功能，但似乎不够简洁，我们还需要优化它。
代码优化
$(".btn3").click(function(){
var data ={}
$("form").serializeArray().map(function(val,key){
data[val.name]=val.value;
})
console.log(data);
})
返回结果
{username1: "a", address1: "b", age1: "c", username2: "d", address2: "e", …}
数据完美获取得到了，代码也进行了优化，最后就可以愉快的把数据传递给后台了。
相关阅读
Win10系统如何开启Aero特效？Win10开启Aero特效的方法
在windows系统中的毛玻璃效果也就是我们所说的Aero特效功能，该功能是自从的win7系统中新增的，其表现为任务栏呈透明状态，而在win10系
jQuery 插件 timedropper datedropper 使用
jQuery 小插件 timedropper datedropper datedropper datedropper 官网地址GitHub 地址：最新版 3.0GitHub 地址：老版本：使用说明 1.
大家都知道在SEO中加入nofollow可以避免我们本页的权重传递出去，而更多的保留在站内的内链之中，因此很多时候我们在网页一些非重要
Excel计算各种总计值的SUBTOTAL函数是如何使用的呢?具体该怎么去进行操作?今天，seo实验室小编就教大家在Excel中subtotal函数计算
qq回收站照片怎么找回？终于找到恢复的方法了。小编会把一些珍贵的照片上传到qq空间保存，或者利用手机备份保存，随着qq空间照片增多，我