jQuery フォームのシリアル化サンプルコード例の共有-jsチュートリアル-php.cn

jQuery フォームのシリアル化サンプルコード例の共有

小云云

リリース： 2018-01-10 09:26:50

オリジナル

1431 人が閲覧しました

この記事では主に jQuery フォームシリアル化のサンプルコードを紹介します。必要な方は参考にしていただければ幸いです。

これ以上ナンセンスではありません。具体的なコードは次のとおりです。

$(function(){
  $(&#39;#send&#39;).click(function(){
     $.ajax({
       type: "GET",
       url: "test.json",
       data: {username:$("#username").val(), password:$("#password").val()}, // 参数为对象
       dataType: "json",
       success: function(data){
          // code...   
       }
     });
  });
});
$(function(){
  $(&#39;#send&#39;).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...
      }
    });
  });
});

ログイン後にコピー

上記は、データパラメーターの 2 つの送信形式をリストした通常の Ajax リクエストコードです。

Ajaxリクエスト中のデータパラメータの取得を容易にするために、jqueryはいくつかのクイックメソッドを定義しています。

1.serialize()

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

戻り値: フォームの内容を文字列にシリアル化します。

こうすれば、ajax経由でフォームデータを送信するときに、すべてのパラメータを1つずつリストする必要がなくなります。 data パラメータを $("form").serialize() に設定するだけです。

コアメソッドは $.param() で、キー/値に従って配列またはオブジェクトをシリアル化するために使用されます。

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

さらに、serialize を使用する利点は、中国語のコンパイル処理が付属していることです。したがって、シリアライズを使用することをお勧めします。

2.serializeArray()

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

戻り値: ページフォームを JSON 構造 (キーと値のペア) オブジェクトにシリアル化します。

例えば、 [{"name":"lihui", "age":"20"},{...}] は jsonData[index].name としてデータを取得します

まとめると、ajax を使用すると、フォームデータを送信する場合、データパラメーターは $(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 環境を設定し、サーバーを開く必要があります