如何通过AJAX监听PHP POST响应并展示表单提交成功提示

你需要的POST提交后根据200状态码展示成功提示的需求，有两种成熟实现方式，对应你现有代码的改造方式如下：

方案1：原生JS Fetch实现AJAX无刷新提交（主流方案） #

不需要引入任何第三方库，用浏览器原生fetch API就可以实现AJAX请求，写法比老旧的XMLHttpRequest简单很多，可直接监听请求返回的响应状态。

第一步：改造PHP端代码 #

你现有PHP里的var_dump调试代码会打乱响应格式，需要替换成标准JSON返回逻辑，修改后代码如下：

<?php
// 设置响应头为JSON格式，方便前端解析
header('Content-Type: application/json');

$data = array(
  "applicants"=> [
    array(
      "email"=> $_POST["email"],
      "firstName"=> $_POST["firstName"],
      "lastName"=> $_POST["lastName"],
      "telephone"=> $_POST["telephone"]
    )
  ],
  "buyerType" => $_POST["buyerType"],
);

$data = json_encode($data);

$ch = curl_init();
$headers = [
  "x-api-key: xxxxxx",
  "accept: application/json",
  "content-Type: application/json",
];

curl_setopt($ch, CURLOPT_URL, 'https://api.smartr365.com/api/v1/mortgage/lead/create');
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);

$response = curl_exec($ch);
$status_code = curl_getinfo($ch, CURLINFO_RESPONSE_CODE);
curl_close ($ch);

// 删除原有的var_dump调试代码，统一返回结构化JSON结果
if($status_code == 200){
    echo json_encode([
        'code' => 200,
        'msg' => '提交成功'
    ]);
}else{
    echo json_encode([
        'code' => $status_code,
        'msg' => '提交失败，请稍后重试'
    ]);
}
exit;
?>

第二步：补充JS提交逻辑 #

在你现有JS代码基础上，添加表单submit事件监听即可，不需要改动你原来的校验、防抖逻辑：

// 如果你之前已经定义过form变量可以跳过这行，把引号里的内容替换成你实际的表单ID
const form = document.getElementById('your-form-id');
// 提前在页面写一个默认隐藏的成功提示元素，也可以直接用alert
const successTip = document.getElementById('successTip');

form.addEventListener('submit', async function(e){
    // 阻止表单默认跳转提交行为
    e.preventDefault();

    // 提交时临时禁用按钮，防止重复提交
    submitBtn.disabled = true;
    const originBtnText = submitBtn.innerText;
    submitBtn.innerText = '提交中...';

    try {
        // 自动收集表单所有字段数据
        const formData = new FormData(form);
        // 发送POST请求
        const res = await fetch(form.action, {
            method: 'POST',
            body: formData
        });
        // 解析后端返回的JSON结果
        const result = await res.json();
        
        if(result.code === 200){
            // 状态码为200时展示成功提示
            successTip.style.display = 'block';
            successTip.innerText = result.msg;
            form.reset(); // 可选配置：提交成功后清空表单内容
        }else{
            alert(result.msg);
        }
    } catch (err) {
        // 捕获网络断开、请求超时等异常
        alert('网络异常，请检查网络连接后重试');
    }finally{
        // 无论成功失败都恢复按钮可用状态
        submitBtn.disabled = false;
        submitBtn.innerText = originBtnText;
    }
})

提示：你可以根据页面设计替换提示样式，不用必须用alert，写个固定的提示条默认隐藏，提交成功后显示的体验更好。

方案2：不使用AJAX的传统提交方案 #

如果你不想写AJAX逻辑，可以用传统表单跳转提交的方式实现，全浏览器兼容：

1. 表单保持原生配置即可，设置action指向你的PHP处理地址、method="post"，不需要拦截submit事件
2. 修改PHP逻辑，处理完第三方接口请求后，用302跳转回表单页面，成功就带success标记，失败带错误标记：

// 替换原来PHP最后输出JSON的部分
if($status_code == 200){
    // 跳回表单页，带上成功标记，把地址替换成你自己的表单页面地址
    header("Location: /your-form-page.html?submit=success");
}else{
    header("Location: /your-form-page.html?submit=error");
}
exit;

3. 在表单页面加一段简单JS，页面加载时判断URL参数，展示对应提示即可：

window.addEventListener('load', function(){
    const params = new URLSearchParams(window.location.search);
    if(params.get('submit') === 'success'){
        alert('提交成功');
    }
    if(params.get('submit') === 'error'){
        alert('提交失败，请稍后重试');
    }
})

这个方案的缺点是提交后页面会整体刷新，交互体验不如AJAX无刷新方案，但实现逻辑更简单，出问题概率更低。

注意事项 #

• 上线前一定要删掉PHP里所有var_dump调试输出，否则会导致响应格式错乱，前端无法正常解析状态
• 不管用哪种方案，提交过程中一定要临时禁用提交按钮，避免用户重复点击产生多条重复数据
• 如果用AJAX方案，要确保PHP接口和前端页面是同域名，跨域场景需要额外配置CORS头，同域名部署不需要额外处理

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