我們都知道HTML的form標簽可以用來創建一個表單，用于提交數據給服務器。常見的方法是使用HTTP請求，其中包含了form里輸入的數據。而json格式則是一種輕量級的數據交換格式，在前后端交互時很常用。那么，我們有沒有想過將form表單提交的數據轉換成json格式的數據呢？

現在，我們就來看一看如何利用JavaScript將form表單數據轉換成JSON格式的數據。

function formToJson(formElement) {
let formData = new FormData(formElement);
let result = {};
formData.forEach(function(value, key) {
// 檢查key是否已存在，如果存在，將值轉換成數組,避免多個同名元素被覆蓋
if (Object.prototype.hasOwnProperty.call(result, key)) {
if (!Array.isArray(result[key])) {
result[key] = [result[key]];
}
result[key].push(value);
} else {
result[key] = value;
}
});
return JSON.stringify(result);
 }

這個函數接收一個form元素作為參數，并為我們提供了form元素的數據轉換成JSON格式的結果。首先，我們使用了FormData API來獲取form元素中的所有鍵值對。然后我們使用forEach方法對其進行遍歷，將結果存儲在一個result對象中，并在必要時將多個同名元素的值轉換成數組。最后，我們使用JSON.stringify方法將result對象轉換成JSON格式的字符串。

使用這個函數非常簡單：

const form = document.querySelector('#form');
 const jsonData = formToJson(form);
 console.log(jsonData);

只需將form元素傳入formToJson函數即可獲得JSON格式的數據。

現在，你已經學會了如何使用JavaScript將form表單轉換成JSON格式的數據。無論是前端開發還是后端開發，這種技術都是非常有用的。