HTML5 FormData を JSON に変換するにはどうすればよいですか?

HTML5 FormData から JSON への変換

HTML5 FormData オブジェクトのエントリを JSON に変換することは、Web 開発における一般的なタスクです。これを実現するにはさまざまなアプローチがありますが、最も簡単で効率的な方法は、ForEach() 関数を FormData オブジェクトで直接使用することです。

var object = {};
formData.forEach(function(value, key){
    object[key] = value;
});
var json = JSON.stringify(object);

このアプローチは、FormData 内の各キーと値のペアを反復処理します。オブジェクトを取得し、新しい JavaScript オブジェクトに追加します。次に、JSON.stringify() メソッドを使用してオブジェクトを JSON 文字列に変換します。

更新: ES6 アロー関数

ES6 構文を好む人のために、アロー関数を使用して同じソリューションを作成できます。

var object = {};
formData.forEach((value, key) => object[key] = value);
var json = JSON.stringify(object);

更新 2: 複数値のフォーム要素のサポート

multi などの複数の値を持つフォーム要素をサポートするには-select リストの場合、次のコードを使用できます:

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);
});
var json = JSON.stringify(object);

アップデート 3: XMLHttpRequest および Fetch API を介した直接送信

変換せずに FormData をサーバーに直接送信XMLHttpRequest オブジェクトまたは Fetch API を使用して可能です:

<code class="javascript">var request = new XMLHttpRequest();
request.open('POST', 'http://example.com/submitform.php');
request.send(formData);</code>

<code class="javascript">fetch('http://example.com/submitform.php', {
  method: 'POST',
  body: formData
}).then((response) => { 
  // do something with response here... 
});</code>

更新 4: 複雑なオブジェクトの JSON シリアル化

複雑なオブジェクトに対してカスタムのシリアル化ロジックを定義できますtoJSON() メソッドを通じてオブジェクトを取得します。

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