Ajax Step By Step5

Posted 2020-08-25 与你在巅峰相会

第五．【表单序列化】

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);