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