クライアント/サーバー通信用に HTML5 FormData を JSON に変換するにはどうすればよいですか?

HTML5 FormData から JSON への変換

HTML5 FormData オブジェクトを JSON に変換すると、フォーム データを機械可読形式にシリアル化できます。これは、クライアントとサーバーの間でデータを送信する場合に便利です。

カスタム オブジェクトと JSON.stringify を使用する方法

jQuery やシリアル化を使用せずに FormData エントリを JSON に変換するにはオブジェクト全体:

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

更新 1: ES6 アロー関数

ES6 アロー関数の使用:

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

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

複数の値を持つ複数選択リストまたはその他のフォーム要素の場合:

<code class="javascript">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);</code>

アップデート 3: FormData の直接送信

XMLHttpRequest 経由でサーバーに FormData を送信する場合:

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

または Fetch API を使用する場合:

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

更新 4: 複雑なカスタム toJSON メソッドオブジェクト

カスタム オブジェクトの場合、そのコンテンツをシリアル化するための toJSON メソッドを定義します。 JSON.stringify の制限の詳細については、MDN ドキュメントを参照してください。

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