如何將 HTML5 FormData 轉換為 JSON 以進行客戶端-伺服器通訊？

將 HTML5 FormData 轉換為 JSON

將 HTML5 FormData 物件轉換為 JSON 允許將表單資料序列化為機器可讀的格式。這對於在客戶端和伺服器之間傳輸資料非常有用。

使用自訂物件和JSON.stringify 的方法

無需jQuery 或序列化FormData 項目即可將FormData 項目轉換為JSONData 項目：

<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：支援多值元素

更新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>

更新2：支援多值元素

對於多重選擇清單或其他具有多個值的表單元素：

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

更新3：直接傳送FormData

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

透過XMLHttpRequest 將FormData 傳送到伺服器：

或使用Fetch API：

更新4：複雜的自訂toJSON 方法物件對於自訂對象，定義一個toJSON 方法來序列化其內容。有關 JSON.stringify 限制的更多信息，請參閱 MDN 文件。

以上是如何將 HTML5 FormData 轉換為 JSON 以進行客戶端-伺服器通訊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！