开发消息应用时AJAX请求成功但数据未发送到PHP页面如何解决

问题排查与修复方案 #

前端jQuery代码问题 #

• jQuery对象没有innerHTML属性，该属性属于原生DOM对象，通过$()选择器获取到的是jQuery封装对象，直接访问innerHTML会得到undefined，导致传递给后端的fromUser、toUser参数为空。
• 缺少请求异常捕获逻辑，当前仅配置了success回调，无法感知后端返回的报错信息。

修正后的前端代码：

$(document).ready(function(){
  $("#button_send").on("click", function(){
    $.ajax({
        url:"insertMessage.php",
        method:"POST",
        data:{
          fromUser: $("#fromUser").text(), // 若为输入框元素请改用.val()
          toUser: $("#toUser").text(), // 同上根据实际元素类型调整
          message: $("#message_text").val()
        },
        dataType:"text",
        success:function(data){
          console.log("后端返回结果：", data); // 调试时可查看后端报错信息
          $("#message_text").val("");
        },
        error:function(xhr, err){
          console.log("请求出错：", err);
        }
    });
  });
});

后端PHP代码问题 #

• 存在变量拼写错误：$message = htmlspecialchars($messgae);中$messgae拼写错误，正确应为$message，变量未定义会导致$message最终为空值。
• 缺少参数校验逻辑，直接读取$_POST中的参数，如果参数未传递会抛出notice级别的错误，若环境配置了错误拦截会中断后续SQL执行。
• 缺少SQL执行结果校验，无法判断插入语句是否真的执行成功。

修正后的后端代码：

<?php
session_start();
include 'includes/config.php';

// 先校验参数是否存在
if (!isset($_POST['fromUser'], $_POST['toUser'], $_POST['message'])) {
    die("缺少必要的请求参数");
}

$fromUser = $_POST['fromUser'];
$toUser = $_POST['toUser'];
$message = $_POST['message'];

// 修正变量拼写错误
$message = htmlspecialchars($message);

$date_p1 = date("d/m/Y");
$date_p2 = date("h:i:sa");
$date = $date_p1." at ".$date_p2;

$insert_message = "INSERT INTO users_messages (from_user, to_user, message, date_time) VALUES (?,?,?,?)";
$check_insert_message = $db->prepare($insert_message);
$res = $check_insert_message->execute([$fromUser, $toUser, $message, $date]);

// 返回执行结果方便前端调试
if ($res) {
    echo "插入成功";
} else {
    echo "插入失败，错误信息：" . implode(" ", $check_insert_message->errorInfo());
}
?>

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