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

jQueryフォームシリアル化サンプルコード

巴扎黑

リリース： 2017-06-21 16:34:58

オリジナル

1280 人が閲覧しました

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

具体的なコードは次のとおりです。上は通常の ajax リクエストコードで、データパラメーターの 2 つの転送形式がリストされています。

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

1.serialize()

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

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

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

コアメソッドは $.param() で、キー/値、

var obj = {first:"one",last:"two"};

var に従って

配列

またはオブジェクトをシリアル化するために使用されます。 str = $.param(obj);console.log(str); // first=one&last=two

また、serializeを使うメリットは中国語のコンパイル処理が付いていることです。したがって、シリアライズを使用することをお勧めします。

2.serialize

Array

()

使用法: var jsonData = $("form").serializeArray(); 戻り値: ページフォームを JSON 構造 (キーと値のペア) オブジェクトにシリアル化します。。

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

まとめると、ajax を使用すると、フォームデータを送信する場合、データパラメーターは $(form).serialize() または $(form).serializeArray() に設定できます。さらに、詳細については w3c を参照することをお勧めします。

最後に完全な例を追加します。

html：

$(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...
      }
    });
  });
});

ログイン後にコピー

JavaScript

：

<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>

ログイン後にコピー

php リマインダー: PHP環境を設定してサーバーを起動する必要があります

<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>

ログイン後にコピー

以上がjQueryフォームシリアル化サンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。