ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript/jQuery を使用してフォーム データにアクセスしてシリアル化する方法は?

JavaScript/jQuery を使用してフォーム データにアクセスしてシリアル化する方法は?

Susan Sarandon
Susan Sarandonオリジナル
2024-11-11 03:26:02213ブラウズ

How to Access and Serialize Form Data with JavaScript/jQuery?

JavaScript/jQuery を使用したフォーム データへのアクセス

従来の HTML メソッド経由で送信されたかのようにフォーム データを取得することは、ウェブ開発。これを実現するために、JavaScript/jQuery は 2 つの主要なオプションを提供します。

オプション 1: $('form').serializeArray() を使用する

このメソッドはフォーム データを変換しますオブジェクトの配列に変換され、各オブジェクトはフォームフィールドを表します。出力は次の形式になります。

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

オプション 2: $('form').serialize() を使用する

このメソッドはフォーム データを次のように取得します。 POST リクエストによる送信用にフォーマットされた 文字列:

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

複雑なフォーム要素のキャプチャ

単純な入力フィールドとは異なり、次のようなフォーム要素テキストエリア、選択、ラジオボタン、チェックボックスには特別な処理が必要です。上記の両方のメソッドは、複雑なフォーム要素データを正しく処理します。

使用例

次のコードは、メソッドの使用方法を示しています。

// Using serializeArray()
var formDataArray = $('form').serializeArray();

// Using serialize()
var formDataString = $('form').serialize();

デモ

実際のメソッドを確認するには、この JSFiddle デモを参照してください: https://jsfiddle.net/

以上がJavaScript/jQuery を使用してフォーム データにアクセスしてシリアル化する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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