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: 複数値のフォーム要素のサポート

複数の値を持つフォーム要素 (複数選択など) をサポートするにはリストでは、次のコードを使用できます:

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 オブジェクトまたはフェッチ API:

var request = new XMLHttpRequest();
request.open('POST', 'http://example.com/submitform.php');
request.send(formData);

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

アップデート 4: 複雑なオブジェクトの JSON シリアル化

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