JQuery Ajax无法向PHP页面提交数据求助

1. 确认username变量是否正确赋值 #

你Ajax代码里的data: { username: username }，第二个username是变量，如果这个变量没定义、没赋值或者值为空，发送给PHP的就是空数据，PHP自然检测不到$_POST['username']，就会返回"hello bro"。

解决方法：

• 先给username变量赋值，比如从输入框获取值：

  // 假设你的用户名输入框id为usernameInput
  const username = $('#usernameInput').val();
  

• 加调试语句验证变量值：

  console.log(username); // 打开浏览器控制台，查看是否输出正确的用户名
  

2. 检查请求URL路径是否正确 #

url: "api/tired.php"是相对路径，要确保这个路径和当前页面的位置匹配。比如当前页面在网站根目录，那api/tired.php就是根目录下api文件夹里的文件；如果当前页面在子文件夹中，路径可能需要调整为../api/tired.php。

解决方法：

• 按F12打开浏览器开发者工具，切换到Network标签，触发Ajax请求后查看状态码：
  • 如果显示404，说明路径错误，修正URL即可。

3. 验证jQuery是否正确引入 #

你使用了$.ajax语法，如果页面没有引入jQuery库，这段代码根本不会执行，自然不会发送请求，PHP返回默认内容。

解决方法：

• 在页面头部引入jQuery：

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  

• 查看控制台是否有$ is not defined的报错，有则说明jQuery未正确引入。

4. 查看实际发送的请求数据 #

在开发者工具的Network标签中找到该POST请求，查看Payload（或Form Data）部分：

• 如果没有username字段，说明变量赋值环节出了问题；
• 如果有字段但值为空，检查变量的来源是否正确。

5. 添加错误回调排查请求问题 #

可以给Ajax添加error回调，直观看到请求失败的原因：

$.ajax({
    type: "POST",
    url: "api/tired.php",
    data: { username: username },
    success: function (data) {
        $("#msg").html(data);
    },
    error: function(xhr, status, err) {
        console.log(err); // 在控制台查看错误详情
    }
});

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