纯JavaScript Ajax无法向PHP提交数据存入数据库求助

我帮你梳理几个大概率导致提交失败的点，你可以一步步检查修复：

1. 请求目标文件错误（最关键！） #

你的JS代码里请求的是empty.php：

ajax.open('POST', 'empty.php', true);

但你用来测试插入数据库的是另一段PHP代码，显然empty.php不是处理数据的正确文件！你需要把这里的路径改成实际处理表单提交的PHP文件路径（比如如果那个PHP文件叫testimony_submit.php，就改成这个）。

2. HTML元素ID冲突 #

你的HTML里，<form>和<textarea>都用了id="testimony"：

<form action="" method="post" id="testimony" accept-charset="utf-8">
<textarea id="testimony" name="testimony" maxlength="300"></textarea>

当你用document.getElementById('testimony')获取元素时，只会拿到第一个匹配的<form>元素，而不是文本框！这会导致你获取不到输入的内容，提交的数据自然是空的。

修复方式：把textarea的id改成唯一值，比如testimony-content：

<textarea id="testimony-content" name="testimony" maxlength="300"></textarea>

然后在JS里对应修改获取元素的代码：

var testimony = document.getElementById('testimony-content');

3. 错误提示元素不存在 #

JS里有一段代码要给id="error"的元素赋值：

document.getElementById('error').innerHTML = 'Characters must be more than 20 words';

但你的HTML里根本没有这个元素，这会直接导致控制台报错，中断后续代码执行。

修复方式：在表单区域添加这个错误提示容器：

<div id="testifyForm">
  <form action="" method="post" id="testimony-form" accept-charset="utf-8">
    <!-- 原有表单内容 -->
    <div id="error" style="color: red; margin: 10px 0;"></div>
    <input type="submit" name="testify" id="testify" value="Testify">
  </form>
</div>

（顺便把form的id也改成testimony-form，避免和之前的textarea混淆）

4. PHP会话未启动 #

你的PHP代码里使用了$_SESSION['msg']，但没有先启动会话，这会触发PHP警告，甚至中断执行。在PHP文件最开头加上：

session_start();

5. Ajax请求下的PHP跳转问题 #

你的PHP代码执行成功后会用header('Location: index.php')跳转，但Ajax请求会直接接收跳转后的index.php页面内容，而不是预期的成功提示。

修复方式：判断是否为Ajax请求，返回文本/JSON响应而不是跳转：

// 在PHP的成功判断里修改：
if ($insert->rowCount() == 1):
    // 判断是否是Ajax请求
    if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
        echo 'Thanks for the testimony';
        exit();
    } else {
        $_SESSION['msg'] = 'Thanks for the testimony';
        header('Location: index.php');
        exit();
    }
endif;

同时在JS的响应处理里，就能正确显示这个成功消息了。

调试技巧 #

除了控制台，一定要用Chrome开发者工具的Network面板：

• 触发提交后，找到对应的POST请求，查看请求的状态码（比如404是文件找不到，500是PHP报错）
• 查看Payload标签，确认提交的testimony参数是否正确
• 查看Response标签，看PHP返回的具体内容（比如PHP的报错信息）

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