這篇文章主要介紹了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">
<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><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 表單序列化實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
