如何將 HTML5 FormData 轉換為 JSON？

將 HTML5 FormData 轉換為 JSON

將 HTML5 FormData 物件的項目轉換為 JSON 是 Web 開發中的常見任務。雖然有多種方法可以實現此目的，但最直接、最有效的方法是直接在 FormData 物件上使用 forEach() 函數。

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 -選擇列表，可以使用以下程式碼：

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中文網其他相關文章！