如何通过JavaScript实现表单序列化？

name

value

function serializeForm(formElement) {
    const formData = {};
    if (!formElement || formElement.tagName !== 'FORM') {
        console.warn('提供的不是一个有效的表单元素。');
        return formData;
    }

    // 遍历表单中的所有元素
    // 我通常会关注那些有name属性且非禁用的元素，因为它们才是真正需要提交的
    const elements = formElement.querySelectorAll('input, select, textarea');

    elements.forEach(element => {
        if (!element.name || element.disabled) {
            // 没有name属性或被禁用的元素，我们通常不关心
            return;
        }

        switch (element.type) {
            case 'radio':
            case 'checkbox':
                // 对于单选和复选框，只处理被选中的
                if (element.checked) {
                    // 如果同一个name有多个值（例如复选框），我们可能需要一个数组
                    if (formData[element.name]) {
                        if (!Array.isArray(formData[element.name])) {
                            formData[element.name] = [formData[element.name]];
                        }
                        formData[element.name].push(element.value);
                    } else {
                        formData[element.name] = element.value;
                    }
                }
                break;

            case 'select-multiple':
                // 多选下拉列表
                const selectedOptions = Array.from(element.options)
                                            .filter(option => option.selected)
                                            .map(option => option.value);
                if (selectedOptions.length > 0) {
                    formData[element.name] = selectedOptions;
                }
                break;

            case 'file':
                // 文件输入类型通常不适合这种简单的key-value序列化
                // 它们需要FormData对象和multipart/form-data编码
                // 所以这里我们选择跳过，或者你可以根据需求做特殊处理
                break;

            default:
                // 默认处理文本、隐藏、密码、数字等输入类型以及textarea和单选select
                formData[element.name] = element.value;
                break;
        }
    });

    return formData; // 返回一个JS对象
}

// 示例用法：
// 假设有一个表单 <form id="myForm">...</form>
// const myForm = document.getElementById('myForm');
// const serializedData = serializeForm(myForm);
// console.log(serializedData); // { field1: 'value1', field2: 'value2' }

// 如果需要URL编码字符串：
// const urlEncodedString = Object.keys(serializedData)
//     .map(key => {
//         const value = serializedData[key];
//         if (Array.isArray(value)) {
//             // 处理数组值，例如复选框
//             return value.map(v => `${encodeURIComponent(key)}=${encodeURIComponent(v)}`).join('&');
//         }
//         return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
//     })
//     .join('&');
// console.log(urlEncodedString); // field1=value1&field2=value2

// 如果需要JSON字符串：
// const jsonString = JSON.stringify(serializedData);
// console.log(jsonString); // {"field1":"value1","field2":"value2"}

application/x-www-form-urlencoded

application/json

submit

reset

button

disabled

name

value

input[type="file"]

FormData

FormData

multipart/form-data

// 假设这是你的HTML表单
// <form id="myAdvancedForm">
//     <input type="text" name="username" value="JohnDoe">
//     <input type="email" name="email" value="john@example.com">
//     <input type="file" name="profilePic">
//     <input type="checkbox" name="interests" value="coding" checked>
//     <input type="checkbox" name="interests" value="reading">
//     <select name="country">
//         <option value="USA">United States</option>
//         <option value="CAN" selected>Canada</option>
//     </select>
// </form>

const formElement = document.getElementById('myAdvancedForm');
const formData = new FormData(formElement);

// FormData会自动处理大多数情况，包括文件和多选
// 你可以通过迭代器查看其内容
console.log("FormData内容：");
for (let [key, value] of formData.entries()) {
    console.log(`${key}: ${value}`);
}
// 预期输出可能包括：
// username: JohnDoe
// email: john@example.com
// profilePic: (File object)
// interests: coding
// country: CAN

// 如果需要添加额外的数据，或者修改现有数据：
formData.append('source', 'web_app');
formData.set('username', 'JaneDoe'); // 如果username已存在，会覆盖

// 然后，你可以直接将FormData对象用于Fetch API或XMLHttpRequest
// fetch('/api/submit', {
//     method: 'POST',
//     body: formData // Fetch API会自动设置Content-Type为multipart/form-data
// })
// .then(response => response.json())
// .then(data => console.log('Success:', data))
// .catch(error => console.error('Error:', error));

FormData

FormData

application/json

serializeForm

JSON.stringify

FormData

multipart/form-data

application/x-www-form-urlencoded

enctype

key1=value1&key2=value2

encodeURIComponent

application/json