jQuery の Serialize() メソッドは、フォーム内のデータを URL エンコードされた文字列にシリアル化します。ただし、エンコードされていない生の文字列を使用する必要がある場合は、serializeArray() メソッドを使用してフォーム データを JSON 配列に変換し、独自のコードを記述して必要な形式に処理します。
この記事では、jQueryを使ってエンコードされていないフォームデータを扱う方法を紹介します。
jQuery の Serialize() メソッドを使用すると、データは URL エンコードされるため、データのセキュリティが確保され、さまざまな環境で使用できます。アプリケーション内で転送されます。ただし、場合によっては、生のフォーム データをエンコードしてから送信するのではなく、バックエンド サーバーに直接送信する必要があります。
たとえば、一部のバックエンド フレームワーク (Spring MVC など) は、URL エンコードされたフォーム データを受信すると自動的にデコードします。つまり、serialize() メソッドを使用するときは、データをエンコードする必要があるかどうかに注意する必要があります。
元のエンコードされていないフォーム データを使用してリクエストを送信する場合は、serializeArray() メソッドを使用して変換できます。 JSON配列に変換します。このメソッドは、フォーム内の各要素を、要素の名前、値、およびタイプ属性を含むオブジェクトに変換します。
たとえば、次のフォーム:
次のコードで JSON 配列に変換できます:
var formData = $("form").serializeArray();
配列のデータ構造は次のとおりです:
[
{ name: "user", value : "Alice"、type : "text" },
{ name: "password"、value: "123456"、type: "text" }
]
2.1 独自のデータ処理を作成するロジック
次に、必要に応じて独自のデータ処理ロジックを作成できます。たとえば、次のコードは、JSON 配列を生のエンコードされていないフォーム データに変換します。
var formData = $("form").serializeArray();
var rawData = {};
formData.forEach(function(item) {
rawData[item.name] = item.value;
});
console.log($.param(rawData) ); // user=Alice&password=123456
2.2 $.param() メソッドを使用して、データをエンコードされていない文字列にシリアル化します
With のような Serialize() メソッドを使用したい場合エンコードされていないフォーム データの場合は、jQuery の $.param() メソッドを使用してデータをシリアル化できます。
var formData = $("form").serializeArray();
var rawData = {};
formData.forEach(function(item) {
rawData[item.name] = item.value;
});
console.log($.param(rawData, true)); // user=Alice&password=123456
$.param() メソッドを使用する場合、出力データがエンコードされていないことを確認するには、2 番目のパラメーターを true に設定する必要があることに注意してください。
この記事では、jQuery を使用してエンコードされていないフォーム データを処理する方法を紹介しました。 SerializeArray() メソッドを使用すると、フォーム データを JSON 配列に変換し、必要な形式に処理するコードを自分で記述することができます。データをエンコードされていない文字列にシリアル化する必要がある場合は、jQuery の $.param() メソッドを使用して、2 番目のパラメーターを true に設定します。
場合によっては、エンコードされていない生のフォーム データを使用する必要がありますが、ほとんどの場合、serialize() メソッドの使用をお勧めします。この方法により、データのセキュリティが確保され、非標準のデータ形式によって引き起こされるバックグラウンド エラーが軽減されます。
以上がjQuery がエンコードされていないフォーム データをどのように処理するかについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。