ホームページ ウェブフロントエンド jsチュートリアル JavaScript/jQuery を使用してフォーム データを取得するにはどうすればよいですか?

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

Nov 10, 2024 pm 03:31 PM

How can I retrieve form data using 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 サイトの他の関連記事を参照してください。

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

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScriptの文字列文字を交換します

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

カスタムGoogle検索APIセットアップチュートリアル

例JSONファイルの例 例JSONファイルの例 Mar 03, 2025 am 12:35 AM

例JSONファイルの例

8見事なjQueryページレイアウトプラグイン 8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

8見事なjQueryページレイアウトプラグイン

10 jQuery構文蛍光物 10 jQuery構文蛍光物 Mar 02, 2025 am 12:32 AM

10 jQuery構文蛍光物

独自のAjax Webアプリケーションを構築します 独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

独自のAjax Webアプリケーションを構築します

' this' JavaScriptで? ' this' JavaScriptで? Mar 04, 2025 am 01:15 AM

' this' JavaScriptで?

10 JavaScript&JQuery MVCチュートリアル 10 JavaScript&JQuery MVCチュートリアル Mar 02, 2025 am 01:16 AM

10 JavaScript&JQuery MVCチュートリアル

See all articles