form轉(zhuǎn)為json是前端開(kāi)發(fā)中常常遇到的任務(wù)之一。在這篇文章中，我們將介紹如何將一個(gè)form表單轉(zhuǎn)為json格式。

function formToJson(form) {
// 通過(guò)form的元素對(duì)象獲取所有控件
let elements = form.querySelectorAll('input, select, textarea');
let formData = {};
// 遍歷所有控件
for (let i = 0; i < elements.length; i++) {
let element = elements[i];
let name = element.name;
let value = element.value;
// 忽略未命名的控件
if(!name) {
continue;
}
// 對(duì)單選、多選及文本框的取值進(jìn)行處理
if (element.type === 'radio') {
if (element.checked) {
formData[name] = value;
}
} else if (element.type === 'checkbox') {
if (element.checked) {
if (Array.isArray(formData[name])) {
formData[name].push(value);
} else {
formData[name] = [value];
}
}
} else {
formData[name] = value;
}
}
// 將formData轉(zhuǎn)為json
let jsonData = JSON.stringify(formData);
return jsonData;
}

上述代碼的思路是，遍歷form表單的所有控件，對(duì)于單選、多選和文本框，對(duì)其取值進(jìn)行處理，并將結(jié)果保存到formData對(duì)象中。最后再將formData對(duì)象轉(zhuǎn)為json格式。

使用示例：

let form = document.querySelector('#my-form');
let jsonData = formToJson(form);
console.log(jsonData);

上述代碼將輸出form表單轉(zhuǎn)化為json格式的結(jié)果。