標籤：index set val dex 返回 配置 blog 結構 log
$(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>
JavaScript：
<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表單序列化
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
