好资源导航 » 文章资讯 » jQuery 表单序列化实例代码

jQuery 表单序列化实例代码

2024-02-20 11:19:03 173

废话不多说了，直接给大家贴代码了，具体代码如下所述：

$(function(){
$('#send').click(function(){
$.ajax({
type:"GET",
url:"test.json",
data:{username:$("#username").val(),password:$("#password").val()},//参数为对象
dataType:"json",
success:function(data){
//code...
}
});
});
});
$(function(){
$('#send').click(function(){
varusername=$("#username").val();
varpassword=$("#password").val();
$.ajax({
type:"GET",
url:"test.json",
data:"username"+username+"&password"+password,//参数为字符串拼接，并用&连接
dataType:"json",
success:function(data){
//code...
}
});
});
});

以上是一段常规的ajax请求代码，其中分别列举了data参数的两种传递格式。

为了简便ajax请求时的data参数获取，jquery定义了几个快速的方法。

1.serialize()

用法：vardata=$("form").serialize();

返回值：将表单内容序列化成一个字符串。

这样在ajax提交表单数据时，就不用一一列举出每一个参数。只需将data参数设置为$("form").serialize()即可。

其核心方法是$.param()，用来对一个数组或对象按照key/value进行序列化，

varobj={first:"one",last:"two"};
varstr=$.param(obj);
console.log(str); //first=one&last=two

另外，使用serialize有个好处是自带中文编译处理。所以，推荐使用serialize。

2.serializeArray()

用法：varjsonData=$("form").serializeArray();

返回值：将页面表单序列化成一个JSON结构（键值对）的对象。

比如，[{"name":"lihui","age":"20"},{...}]获取数据为jsonData[index].name

综上：在使用ajax提交表单数据时,data参数设置为$(form).serialize()或$(form).serializeArray()都可以。另外有些细节建议参考w3c。

最后补充一个完整实例。

html：

JavaScript：

php 提醒：需要配置php环境并开启服务器

以上所述是小编给大家介绍的jQuery表单序列化实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

返回顶部
3162201930
czq8825@qq.com

jQuery 表单序列化实例代码

热门推荐

随机推荐