Ajax Step By Step5

最新推荐文章于 2025-08-11 13:45:09 发布

weixin_34217711

最新推荐文章于 2025-08-11 13:45:09 发布

阅读量85

点赞数

CC 4.0 BY-SA版权

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/wfaceboss/p/6224466.html

本文介绍了如何使用表单序列化方法简化Ajax操作，并对比了传统表单提交方式与使用.serialize()方法的区别。同时，还介绍了如何利用.serializeArray()获取JSON格式的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

posted on 2016-12-27 00:58 WFaceBoss 阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/wfaceboss/p/6224466.html