JavaScript/jQuery を使用してフォーム データを取得するにはどうすればよいですか?

JavaScript/jQuery を使用したフォーム データの取得

フォーム送信では、多くの場合、クライアント側での検証または処理のためにフォーム データを取得する必要があります。このデータには、入力フィールド、選択リスト、その他の要素が含まれます。よくある質問の 1 つは、このデータを簡素化した方法で取得する方法です。

jQuery の SerializeArray() メソッドを使用する

1 つの優れた解決策は、jQuery() メソッドを活用することです。これは、フォーム データを表すオブジェクトの配列を返します。このメソッドは、フォームをキーと値のペアの配列に効率的にシリアル化します:

$(function () {
    var formData = $('#form').serializeArray();
});

たとえば、フォームに次のフィールドが含まれる場合:

<input type="radio" name="foo" value="1" checked="checked" />
<input type="radio" name="foo" value="0" />
<input name="bar" value="xxx" />
<select name="this">
    <option value="hi" selected="selected">Hi</option>
    <option value="ho">Ho</option>
</select>

出力は次のようになります:

[
  {"name":"foo","value":"1"},
  {"name":"bar","value":"xxx"},
  {"name":"this","value":"hi"}
]

jQueryのserialize()の使用メソッド

または、jQuery() を使用してフォーム データのクエリ文字列表現を作成できます。

$(function () {
    var formData = $('#form').serialize();
});

このメソッドは、分離されたキーと値のペアを含む文字列を出力します。アンパサンドで区切って、サーバー:

"foo=1&bar=xxx&this=hi"

デモ

この JSFiddle で両方の jQuery メソッドを使用してフォーム データを取得する実践的なデモをご覧ください: https://jsfiddle.net/t7hvjne1/

以上がJavaScript/jQuery を使用してフォーム データを取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。