JavaScript实现AJAX提交表单数据失效的代码排查

代码存在的核心问题 #

• FormData实例化时机错误：在页面加载完成、用户还未输入任何内容时就初始化了FormData对象，后续提交时读取的永远是表单初始默认值，无法获取用户最新填写/选择的内容。
• 响应结果处理逻辑错误：response.text()返回的是Promise对象，直接打印只能看到Promise状态，无法获取接口实际返回的文本内容，需要使用await等待解析完成。
• 后端参数接收适配问题：PHP默认不会自动解析Content-Type: application/json类型的POST请求数据，无法直接通过$_POST全局变量获取提交的参数，需要额外读取原始请求流解析。

修正后的实现代码 #

前端JavaScript代码 #

const form = document.getElementById('example-form');
const url = form.action;

form.onsubmit = async (e) => {
    e.preventDefault();
    // 提交事件触发时再实例化FormData，采集用户最新输入的表单数据
    const formData = new FormData(form);

    try {
        const plainFormData = Object.fromEntries(formData.entries());
        const formDataJsonString = JSON.stringify(plainFormData);

        const response = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: formDataJsonString
        });
        // 等待响应文本解析完成后再打印
        const result = await response.text();
        console.log(result);
         
    } catch (error) {
        console.error(error);
    }
}

原有HTML表单代码无需修改，可直接配合上述JS使用。

后端PHP接收示例（适配JSON提交格式） #

<?php
// 读取原始POST请求流中的JSON数据
$rawPost = file_get_contents('php://input');
$formParams = json_decode($rawPost, true);

// 即可正常获取提交的参数
$selectedOption = $formParams['options'];
$username = $formParams['username'];

// 自定义业务逻辑
echo "提交成功，用户名：{$username}，选择的分类：{$selectedOption}";
?>

内容的提问来源于stack exchange，提问作者alexandre