如何使用jQuery获取表单数据并发送POST请求

serializeArray() 无法正常获取表单数据的核心原因是你的表单输入控件都没有设置name属性。jQuery的serialize()、serializeArray()方法只会识别、序列化带有name属性的表单字段，缺失name属性的字段会被直接跳过，自然无法得到预期结果。

另外你代码里用户名输入框的type="username"不是标准的input type值，建议修正为type="text"避免浏览器兼容问题。

• 首先修改表单HTML，给需要提交的输入框加上对应name属性：

<div class="form-outline form-floating mb-4">
    <!-- 补充name属性，修正type值 -->
    <input type="text" id="username" name="username" class="form-control"
        placeholder="Username" />
    <label class="form-label" for="username">Username</label>
</div>
<div class="form-outline form-floating mb-4">
    <!-- 补充name属性 -->
    <input type="password" id="password" name="password" class="form-control"
        placeholder="Password" />
    <label class="form-label" for="password">Password</label>
</div>

• 选择对应方案编写提交逻辑，下面提供两种常用实现：

方案1：jQuery serializeArray 实现（适合普通键值对表单提交） #

$('#login-form').submit((e) => {
    e.preventDefault();
    // 序列化表单为数组结构
    const formArray = $(e.target).serializeArray();
    // 转换为普通键值对对象方便后续使用
    const formData = {};
    formArray.forEach(field => {
        formData[field.name] = field.value;
    });
    console.log('获取到的表单数据：', formData);

    // 发送POST请求
    $.post('/your-login-api-path', formData, (response) => {
        console.log('登录请求成功', response);
        // 在这里写登录成功后的跳转、提示逻辑
    }).fail((error) => {
        console.log('登录请求失败', error);
    });
});

方案2：原生FormData 实现（适合包含文件上传的表单场景） #

$('#login-form').submit((e) => {
    e.preventDefault();
    // 直接传入原生表单对象构建FormData实例
    const formData = new FormData(e.target);
    // 如果需要转为普通对象查看内容，可以使用下面的代码
    // const plainFormData = Object.fromEntries(formData.entries());
    // console.log(plainFormData);

    // 发送POST请求，注意要配置processData和contentType为false，jQuery才会正确处理FormData格式
    $.ajax({
        url: '/your-login-api-path',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: (response) => {
            console.log('登录请求成功', response);
            // 登录成功逻辑
        },
        error: (error) => {
            console.log('登录请求失败', error);
        }
    });
});

提示：如果你使用原生fetch发送请求，直接将FormData实例作为请求body传入即可，不需要额外配置序列化相关参数。

内容的提问来源于stack exchange，提问作者namln-hust