ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript と jQuery を使用してフォーム データを取得するにはどうすればよいですか?

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

Susan Sarandon
Susan Sarandonオリジナル
2024-11-12 02:03:02247ブラウズ

How to Get Form Data Using JavaScript and jQuery?

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

フォームを操作する場合、フォームに含まれるデータをプログラムで取得する必要が生じることがよくあります。このデータは、さらなる処理、検証、またはサーバーへの送信に使用できます。幸いなことに、JavaScript と jQuery を使用すると、このデータの取得は簡単なプロセスです。

jQuery の SerializeArray() メソッド

フォームからデータを取得する効率的で便利な方法の 1 つjQueryのserializeArray()メソッドを使用することです。このメソッドはオブジェクトの配列を返します。各オブジェクトはフォーム内の入力要素を表します。各オブジェクトには、要素の名前と値のプロパティが含まれています。

このメソッドを使用するには、フォーム セレクターでメソッドを呼び出すだけです。

var data = $('form').serializeArray();

データ配列には、次のようなオブジェクトが含まれます。

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

jQueryのserialize() Method

もう 1 つのオプションは、string を返す jQuery の Serialize() メソッドを使用することです。この文字列は、従来の HTML フォーム送信で受け入れられる形式のフォーム データを表します。

このメソッドを使用するには、フォーム セレクターでメソッドを呼び出すだけです。

var data = $('form').serialize();

データ変数には次のものが含まれます。のような文字列以下:

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

デモ

これらのメソッドの動作を確認するには、次のフィドルを確認してください: https://jsfiddle.net/w84ny75L/

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。