中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

jQuery 表單序列化實例代碼

發布時間:2020-09-03 08:38:20 來源:腳本之家 閱讀:149 作者:mrr 欄目:web開發

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

$(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 表單序列化實例代碼,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

贵德县| 湖口县| 萨迦县| 赫章县| 乌拉特前旗| 徐汇区| 五大连池市| 连云港市| 广丰县| 上犹县| 夏河县| 惠东县| 安陆市| 威宁| 海晏县| 六安市| 青海省| 石城县| 麻江县| 怀柔区| 城口县| 特克斯县| 永吉县| 禹州市| 甘肃省| 宜兴市| 射洪县| 阿坝县| 铜梁县| 滦平县| 出国| 巴彦淖尔市| 九台市| 突泉县| 固阳县| 道真| 莫力| 沅江市| 昌图县| 廊坊市| 宜州市|