无刷新页面将图片标注存入数据库的异常问题排查

这种没报错但数据死活存不进去的情况真的挺磨人的，我来帮你梳理几个常见的排查方向，一步步定位问题：

打开浏览器开发者工具（按F12）切换到「Network」标签页，然后触发标注提交的操作，重点看：

• 有没有向insert-data.php发送请求？如果连请求都没发，那问题肯定在前端逻辑里：
  • 给Annotorious的保存回调加个console.log()，打印一下拿到的标注数据，确认回调函数真的被触发了，且能拿到完整的标注内容。
  • 因为用了jQuery无冲突模式，要确保代码里没再用$()，要么换成jQuery()，要么提前定义别名比如var $j = jQuery.noConflict();，然后用$j来操作DOM和发请求。
  • 检查请求的URL路径是否正确，比如相对路径写错导致404（Network里会显示红色的请求状态）。

如果Network里能看到请求，点进去看「Request Payload」或「Form Data」：

• 确认发送的字段（比如标注坐标、文本、关联的图片ID）是否完整，有没有漏传后端需要的参数？
• 检查Annotorious返回的标注对象结构，是不是你提取字段时搞错了（比如把annotation.x写成了annotation.left这种）。

没报错不代表没有问题，可能是错误被屏蔽了，先开启错误提示：

// 放在insert-data.php最开头
error_reporting(E_ALL);
ini_set('display_errors', 1);

然后逐一排查：

• 数据库连接是否真的成功：在连接代码后加判断，避免连接失败却没提示：

  $conn = new mysqli($db_host, $db_user, $db_pass, $db_name);
  if ($conn->connect_error) {
      die("数据库连接失败: " . $conn->connect_error);
  }
  

• SQL语句是否正确：把组装好的SQL语句打印出来，复制到phpMyAdmin或其他数据库客户端里手动执行，看能不能插入数据：

  $sql = "INSERT INTO annotations (image_id, x, y, width, height, content) VALUES ('$img_id', '$x', '$y', '$w', '$h', '$content')";
  echo $sql; // 打印出来测试
  

  另外建议用预处理语句，既能避免SQL注入，也能解决引号转义的问题：

  $stmt = $conn->prepare("INSERT INTO annotations (image_id, x, y, width, height, content) VALUES (?, ?, ?, ?, ?, ?)");
  $stmt->bind_param("iiidds", $img_id, $x, $y, $w, $h, $content);
  $stmt->execute();
  

• 有没有被过滤逻辑拦截：比如后端对某些字段做了非空验证，但前端没传值，导致代码直接跳过插入却没输出提示。

• 如果前端页面和insert-data.php不在同一个域名/端口下，检查Network里的请求是否有CORS相关错误。
• 确认前端用的请求方法（POST/GET）和后端接收的一致，比如前端发POST，后端要拿$_POST而不是$_GET的数据。

内容的提问来源于stack exchange，提问作者Syed Salif Moin