第五.【表单序列化】
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);
时间: 2024-10-13 23:23:55