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

HTML5 FormData から JSON への変換: ステップバイステップ ガイド

問題: jQuery やオブジェクト全体をシリアル化せずに、FormData オブジェクトを JSON に変換します。

回答:

FormData オブジェクトのエントリを JSON に変換するには、次の手順に従います。

1. キーと値のペアを保存する空のオブジェクトを作成します。
2. ループまたは forEach などのメソッドを使用して、FormData オブジェクトを反復処理します。
3. エントリごとに、キーを設定します空のオブジェクトの値をエントリの名前に、値をその値に変換します。
4. JSON.stringify() メソッドを使用してオブジェクトを JSON に変換します。

forEach の使用例:

<code class="js">var object = {};
formData.forEach(function(value, key){
    object[key] = value;
});
var json = JSON.stringify(object);</code>

ES6 アロー関数の使用例:

<code class="js">var object = {};
formData.forEach((value, key) => object[key] = value);
var json = JSON.stringify(object);</code>

複数選択リストのサポート:

フォームに複数の値を持つ複数選択リストまたはその他の要素が含まれている場合は、次のアプローチを使用できます:

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

FormData をサーバーに送信する:

フォーム データをサーバーに送信する場合は、JSON への変換をスキップし、XMLHttpRequest または Fetch API リクエストを使用して FormData オブジェクトを直接送信できます。

注意:

JSON.stringify() メソッドは、すべてのタイプのオブジェクトをサポートしているわけではありません。オブジェクトにサポートされていない型が含まれている場合は、カスタム toJSON() メソッドを実装してシリアル化ロジックを指定する必要がある場合があります。

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