快捷導(dǎo)航

jQuery 表單序列化實(shí)例代碼

更新時(shí)間：2017年06月11日 10:12:31 投稿：mrr

這篇文章主要介紹了jQuery 表單序列化實(shí)例代碼,需要的朋友可以參考下

廢話不多說了，直接給大家貼代碼了，具體代碼如下所述：

$(function(){
  $('#send').click(function(){
     $.ajax({
       type: "GET",
       url: "test.json",
       data: {username:$("#username").val(), password:$("#password").val()}, // 參數(shù)為對象
       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, // 參數(shù)為字符串拼接，并用&連接
      dataType: "json",
      success: function(data){
        // code...
      }
    });
  });
});

以上是一段常規(guī)的ajax請求代碼，其中分別列舉了data參數(shù)的兩種傳遞格式。

為了簡便ajax請求時(shí)的data參數(shù)獲取，jquery定義了幾個(gè)快速的方法。

1.serialize()

　　用法：var data = $("form").serialize();

　　返回值：將表單內(nèi)容序列化成一個(gè)字符串。

　　這樣在ajax提交表單數(shù)據(jù)時(shí)，就不用一一列舉出每一個(gè)參數(shù)。只需將data參數(shù)設(shè)置為 $("form").serialize() 即可。

其核心方法是$.param()，用來對一個(gè)數(shù)組或?qū)ο蟀凑誯ey/value進(jìn)行序列化，

var obj = {first:"one",last:"two"};
var str = $.param(obj);
console.log(str); // first=one&last=two

　　另外，使用serialize有個(gè)好處是自帶中文編譯處理。所以，推薦使用serialize。

2.serializeArray()

　　用法：var jsonData = $("form").serializeArray();

　　返回值：將頁面表單序列化成一個(gè)JSON結(jié)構(gòu)（鍵值對）的對象。

　　比如，[{"name":"lihui", "age":"20"},{...}] 獲取數(shù)據(jù)為 jsonData[index].name

綜上：在使用ajax提交表單數(shù)據(jù)時(shí),data參數(shù)設(shè)置為$(form).serialize()或$(form).serializeArray()都可以。另外有些細(xì)節(jié)建議參考w3c。

最后補(bǔ)充一個(gè)完整實(shí)例。

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環(huán)境并開啟服務(wù)器