jQuery AJAX POST请求到PHP无响应、参数未定义问题如何修复？

报错根因说明 #

你看到的Cannot use 'in' operator错误是因为PHP服务端抛出了HTML格式的notice报错，和正常返回的JSON数据混合，前端jQuery无法正确解析为JSON格式，遍历数据时就触发了该报错。

修复步骤 #

1. 修复PHP端语法错误 #

PHP是服务端语言，没有console.log()方法，你在数据库连接失败分支调用该函数会直接抛出PHP错误，打断后续执行，替换为服务端正确的错误处理逻辑：

// 替换原有数据库连接错误处理代码
if ($conn->connect_error) {
  die(json_encode(['error' => "数据库连接失败: " . $conn->connect_error]));
}

2. 新增POST参数存在性校验 #

直接读取$_POST里的索引如果参数不存在，就会抛出未定义索引的报错，先判断参数存在再赋值：

// 替换原有参数读取代码
if (!isset($_POST['usernameData'], $_POST['passwordData'])) {
  die(json_encode(['error' => '缺少登录必填参数']));
}
$mainusername = $_POST['usernameData'];
$mainpassword = $_POST['passwordData'];

你之前把$mainusername替换为固定字符串能正常运行，就是因为跳过了读取$_POST参数的步骤，避开了参数不存在的报错。

3. 完善AJAX请求配置 #

3.1 增加返回数据类型声明

给AJAX请求加上dataType: 'json'配置，明确指定返回内容为JSON格式，避免解析错误：

$.ajax({
    type: "POST",
    url: "/php/login.php",
    data: {
      // 建议这里改成动态读取表单输入值，不要写死
      usernameData: $('#logusername').val(),
      passwordData: $('#logpassword').val()
    },
    dataType: 'json', // 新增这行
    cache: false,
    success: function(datas){
      $.each(datas, function(idx, loginData){
        console.log(loginData.name)
        console.log(loginData.password)
      });
    },
    error: function(xhr, status, error) {
      console.error(xhr.responseText);
      console.error(status);
      console.error(error);
    }
});

3.2 阻止表单默认提交行为

如果你的AJAX是绑定表单提交事件触发的，必须添加代码阻止表单默认的跳转提交行为，否则会出现表单直接提交到login.php、不走AJAX逻辑的情况：

$('#logform').on('submit', function(e) {
  e.preventDefault(); // 阻止默认提交跳转
  // 此处放置你的AJAX请求代码
})

4. 安全优化（必做） #

你当前的SQL语句直接拼接用户输入参数，存在严重的SQL注入风险，建议替换为预处理查询：

// 替换原有SQL查询逻辑
$stmt = $conn->prepare("SELECT username, pass FROM user WHERE username = ?");
$stmt->bind_param("s", $mainusername);
$stmt->execute();
$result = $stmt->get_result();

$rawlogindata = [];
while ($row = $result->fetch_assoc()) {
  $rawlogindata[] = [
    'name' => $row['username'],
    'password' => $row['pass']
  ];
}
echo json_encode($rawlogindata);
$stmt->close();

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