jQuery 表单序列化实例代码     投稿：mrr   这篇文章主要介绍了jQuery 表单序列化实例代码,需要的朋友可以参考下
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" 
 input type="text" value="demo1" name="demo1" 
 input type="text" value="demo2" name="demo2" 
 input type="text" value="demo3" name="demo3" 
 input type="submit" value="提交" id="submit" 
 /form 
 /body 
 /html 

JavaScript：

 script 
 // 别忘了引入jquery !!!
 $(function(){
 $("#submit").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 表单序列化实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！