Ajax Step By Step5
第五．【表单序列化】
Ajax 用的最多的地方莫过于表单操作，而传统的表单操作是通过 submit 提交将数据传 输到服务器端。如果使用 Ajax 异步处理的话，我们需要将每个表单元素逐个获取才方能提 交。这样工作效率就大大降低.
对比数据传输的差别：
//常规形式的表单提交
$('form input[type=button]').click(function(){
$.ajax({
type:'POST',
url:'test.php',
data:{
user:$('forminput[name=user]').val(),
email:$('form input[name=email]').val()
},
success:function(response,status,xhr)
{ alert(response); }
});
});注意：当数据很多时user 和email位置获取数据容易出错。
怎么解决该问题呢？？
方法为：使用表单序列化方法.serialize()，会智能的获取指定表单内的所有元素。这样，在面对大量表单元素时，会把表单元素内容序列化为字符串，然后再使用 Ajax 请求。
(2) //使用.serialize()序列化表单内容
$('forminput[type=button]').click(function(){
$.ajax({
type:'POST',
url:'test.php',
data:$('form').serialize(),
success:function(response,status,xhr)
{ alert(response); }
})
});特别注意：.serialize()方法不但可以序列化表单内的元素，还可以直接获取单选框、复选框和下拉 列表框等内容。
（2.1）//使用序列化得到选中的元素内容
$(':radio').click(function(){
$('#box').html(decodeURIComponent($(this).serialize())); // decodeURIComponent编码转换
});知识点：返回 JSON 数据的方法：.serializeArray()。这个方法 可以直接把数据整合成键值对的 JSON 对象。
$(':radio').click(function(){
console.log($(this).serializeArray()); var json=$(this).serializeArray(); $('#box').html(json[0].value);
})有时，我们可能会在同一个程序中多次调用$.ajax()方法。而它们很多参数都相同，这个时候我们可以使用 jQuery 提供的$.ajaxSetup()请求默认值来初始化参数。
$('forminput[type=button]').click(function(){
$.ajaxSetup({
type:'POST',
url:'test.php',
data:$('form').serialize() });
$.ajax({
success:function(response,status,xhr)
{ alert(response); }
});
});在使用 data 属性传递的时候，如果是以对象形式传递键值对，可以使用$.param()方法 将对象转换为字符串键值对格式。
Var obj={a:1,b:2,c:3};
var form=$.param(obj); //将obj json对象转成字符串键值对
alert(form);本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2016-12-27 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
