使用JavaScript AJAX与PHP提交聊天系统表单数据失败如何解决

以下是你代码中存在的问题及对应修复方式：

• 参数编码错误
  你直接拼接用户输入的消息内容到POST数据中，如果用户输入包含&、=、中文或特殊符号，会导致服务端解析参数错误。发送前需要对消息内容做URL编码：

  xhttp.send("q=<?php echo $hashed_id; ?>&chat_message=" + encodeURIComponent(cm));
  

• PHP分支逻辑错误
  哈希ID匹配失败的else分支中，你仅设置了跳转头但没有终止代码执行，后续的消息插入逻辑仍会运行，且此时你已经关闭了数据库连接、$id变量为空，必然导致插入失败。同时AJAX异步请求不会响应302跳转，前端用户完全感知不到错误。
  修复方案：在else分支中添加终止执行逻辑，同时返回错误状态给前端：

  } else {
      mysqli_free_result($result);
      mysqli_close($connection);
      // AJAX请求不要用跳转，返回错误状态
      http_response_code(400);
      exit("非法聊天ID");
  }
  

• 多余的转义操作
  你已经使用了预处理语句，不需要再调用mysqli_real_escape_string对参数做转义，多余的转义反而可能导致数据内容异常，直接删掉这两处转义即可。
• 缺少错误排查逻辑
  你没有处理AJAX请求的响应结果，也没有添加PHP执行错误的日志/返回逻辑，出错时无法定位问题。可以在JS中添加状态监听回调：

  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // 提交成功后清空输入框
      document.getElementById("message").value = "";
    } else if (this.readyState ==4) {
      console.log("提交失败，错误信息：" + this.responseText);
    }
  };
  

  PHP中也可以添加预处理执行的错误判断，方便定位数据库相关问题：

  if(!mysqli_stmt_execute($stmt)) {
    exit("执行失败：" . mysqli_stmt_error($stmt));
  }
  

• 插入参数类型错误
  你绑定插入参数时给chat_id指定的是d（数字）类型，而你初始赋值$id = ""是空字符串，若ID匹配逻辑出问题，空字符串转数字会变成0，导致插入错误数据。可以把初始值改成$id = 0;更符合数字类型的默认值逻辑。

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