php form表单序列化,jQuery 表单序列化实例代码实例分享

本文主要介绍了jQuery 表单序列化实例代码,需要的朋友可以参考下，希望大家能更好掌握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：

JavaScript：

// 别忘了引入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);

}

})

})

})

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

echo json_encode($_GET);

?>

相关推荐：