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

Susan Sarandon
リリース: 2024-11-12 02:03:02
オリジナル
267 人が閲覧しました

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート