如何在不序列化的情況下將 HTML5 FormData 轉換為 JSON？

在不序列化的情況下將HTML5 FormData 轉換為JSON

使用HTML5 表單時，可能需要將表單的資料轉換為JSON。一種常見的方法是序列化 FormData 物件；然而，這可能不適合所有情況。以下是將FormData 項目轉換為JSON 而不進行序列化的方法：

第1 步：迭代FormData 物件

使用forEach() 方法迭代FormData 物件的方法條目。每個條目包含一個鍵（欄位名稱）和一個值（輸入值）。

第 2 步：建立一個普通物件

初始化一個空物件來儲存轉換後的JSON 資料。

第 3 步：將條目轉換為鍵值對

在 forEach() 回呼中，根據鍵將值指派給物件。例如：

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

第四步：將物件轉換為 JSON

最後，使用 JSON.stringify() 方法將物件轉換為 JSON 字串。

<code class="javascript">var json = JSON.stringify(object);</code>

使用ES6 箭頭函數

您可以使用ES6 箭頭函數來簡化forEach() 迴圈：

<code class="javascript">formData.forEach((value, key) => object[key] = value);</code>

支援多個值

如果您的表單包含具有多個值的字段，例如多選列表，您可以修改上述程式碼以支援它們：

<code class="javascript">formData.forEach((value, key) => {
    if (!Array.isArray(object[key])) {
        object[key] = [object[key]];
    }
    object[key].push(value);
});</code>

直接發送FormData

如果您的目標是透過XMLHttpRequest 提交表單數據，您可以考慮直接發送FormData 對象，而不將其轉換為JSON。 Fetch API 也支援此方法。

處理複雜物件

請注意，JSON.stringify() 方法在處理複雜物件時可能會遇到限制。在這種情況下，請考慮在物件中定義 toJSON() 方法來指定自訂序列化邏輯。

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