如何在沒有 jQuery 的情況下將 HTML5 FormData 條目轉換為 JSON？

將HTML5 FormData 項目轉換為JSON

在處理表單資料並將其傳遞到伺服器端點或API 時，將HTML5 FormData 項目轉換為JSON 至關重要。這是一個不依賴jQuery 或序列化的解決方案：

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

為了增強可讀性和簡潔性，您可以使用ES6 箭頭函數：

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

處理多值表單元素：

如果需要支援多重選擇清單或其他具有多個值的表單元素，可以如下擴充解決方案：

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);

直接無需轉換即可提交至伺服器：

如果您的目標是將FormData 提交到伺服器，您可以繞過JSON 轉換步驟，直接透過Ajax 或Fetch API 發送FormData 物件本身：

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) => { 
  // Handle server response here... 
});

不可序列化物件的注意事項：

請記住，如果沒有額外的自訂，JSON stringify 方法可能無法處理所有類型的對象。如果您遇到物件序列化問題，您可以在物件上定義自己的 toJSON() 方法來指定所需的序列化行為。

以上是如何在沒有 jQuery 的情況下將 HTML5 FormData 條目轉換為 JSON？的詳細內容。更多資訊請關注PHP中文網其他相關文章！