jquery表单序列化
Posted 亲爱的混蛋
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery表单序列化相关的知识，希望对你有一定的参考价值。
$(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(){ var username = $("#username").val(); var password = $("#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()
用法：var data = $("form").serialize();
返回值：将表单内容序列化成一个字符串。
这样在ajax提交表单数据时，就不用一一列举出每一个参数。只需将data参数设置为 $("form").serialize() 即可。
其核心方法是$.param()，用来对一个数组或对象按照key/value进行序列化，
var obj = {first:"one",last:"two"}; var str = $.param(obj); console.log(str); // first=one&last=two
另外，使用serialize有个好处是自带中文编译处理。所以，推荐使用serialize。
2.serializeArray()
用法：var jsonData = $("form").serializeArray();
返回值：将页面表单序列化成一个JSON结构（键值对）的对象。
比如，[{"name":"lihui", "age":"20"},{...}] 获取数据为 jsonData[index].name
综上：在使用ajax提交表单数据时,data参数设置为$(form).serialize()或$(form).serializeArray()都可以。另外有些细节建议参考w3c。
最后补充一个完整实例。
html：
<html> <head> <meta charset="utf-8"> </head> <body> <form id="demo" method="post"> <input type="text" value="demo1" name="demo1"> <input type="text" value="demo2" name="demo2"> <input type="text" value="demo3" name="demo3"> </form> </body> </html>
<script>
// 别忘了引入jquery !!!
$(function(){
$(document).click(function(){
// var data = $("form").serializeArray();
var data = $("form").serialize();
$.ajax({
type:"GET",
url:"1.php",
data:data,
dataType:"json",
success:function(data){
console.log(data);
},
error:function(xhr,error){
console.log(error);
}
})
})
})
</script>
php 提醒：需要配置php环境并开启服务器
<?php echo json_encode($_GET); ?>
以上是关于jquery表单序列化的主要内容，如果未能解决你的问题，请参考以下文章