シリアル化せずに HTML5 FormData を JSON に変換するにはどうすればよいですか?

シリアル化を行わずに HTML5 FormData を JSON に変換する

HTML5 フォームを操作する場合、フォームのデータを JSON に変換する必要が生じる場合があります。一般的なアプローチの 1 つは、FormData オブジェクトをシリアル化することです。ただし、これはすべての場合に望ましいとは限りません。シリアル化せずに FormData エントリを JSON に変換する方法は次のとおりです。

ステップ 1: FormData オブジェクトを反復処理する

forEach() メソッドを使用して、FormData オブジェクトのオブジェクトを反復処理します。エントリー。各エントリにはキー (フィールド名) と値 (入力値) が含まれています。

ステップ 2: プレーン オブジェクトを作成する

変換されたデータを保存する空のオブジェクトを初期化します。 JSON データ。

ステップ 3: エントリをキーと値のペアに変換する

forEach() コールバック内で、キーに基づいてオブジェクトに値を割り当てます。例:

<code class="javascript">formData.forEach(function(value, key) {
    object[key] = value;
});</code>

ステップ 4: オブジェクトを JSON に変換する

最後に、JSON.stringify() メソッドを使用してオブジェクトを JSON 文字列に変換します。

<code class="javascript">var json = JSON.stringify(object);</code>

ES6 アロー関数の使用

ES6 アロー関数を使用して forEach() ループを簡略化できます。

<code class="javascript">formData.forEach((value, key) => object[key] = value);</code>

複数の値のサポート

フォームに複数の値を持つフィールド (複数選択リストなど) が含まれている場合、それらをサポートするように上記のコードを変更できます。

<code class="javascript">formData.forEach((value, key) => {
    if (!Array.isArray(object[key])) {
        object[key] = [object[key]];
    }
    object[key].push(value);
});</code>

FormData の直接送信

XMLHttpRequest 経由でフォーム データを送信することが目的の場合は、FormData オブジェクトを JSON に変換せずに直接送信することを検討できます。このアプローチは Fetch API でもサポートされています。

複雑なオブジェクトの処理

複雑なオブジェクトを処理する場合、JSON.stringify() メソッドには制限が発生する可能性があることに注意してください。このような場合は、オブジェクト内で toJSON() メソッドを定義してカスタムのシリアル化ロジックを指定することを検討してください。

以上がシリアル化せずに HTML5 FormData を JSON に変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。