首頁  >  文章  >  web前端  >  jQuery 表單序列化實例程式碼實例分享

jQuery 表單序列化實例程式碼實例分享

小云云
小云云原創
2018-01-10 09:26:501427瀏覽

本文主要介紹了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 form表單序列化的注意事項說明

#jQuery 表單序列化實例程式碼

jQuery將表單序列化成一個Object物件的實例

#

以上是jQuery 表單序列化實例程式碼實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn