第五.【表单序列化】
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 请求。
() //使用.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[].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:,b:,c:};
var form=$.param(obj); //将obj json对象转成字符串键值对
alert(form);