通过AJAX向MySQL表插入音频播放记录失败求助

1. AJAX请求数据格式错误 #

你当前的AJAX请求直接传递了trkId数值，后端$_POST['trkId']无法获取到对应参数——POST请求需要键值对格式的data参数。

修正后的AJAX代码： #

<script type="text/javascript">
  function addPlays() {
      var trkId = <?php echo $trkid; ?>;
      $.ajax({
        type: "POST",
        url: "update-plays.php",
        data: { trkId: trkId }, // 改为键值对格式
        cache: false,
        success: function() {
            alert('success');
        },
        error: function(xhr, status, error) {
            // 优化错误提示，打印具体错误信息
            alert('error: ' + error);
        }
      });
   }
</script>

2. 未引入jQuery库 #

如果页面没有加载jQuery，$.ajax会直接报错，导致addPlays()函数执行中断，自然不会弹出任何提示。

解决： #

在页面<head>或<body>末尾引入jQuery，比如：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

（本地项目可下载jQuery文件后引入本地路径）

3. PHP后端缺乏错误检测与反馈 #

当前PHP代码没有检查数据库操作是否成功，也没有向前端返回响应，即使请求到达后端，也无法判断执行结果。

修正后的PHP代码： #

<?php
// 确保数据库连接有效
if (!$connGWM) {
    die(json_encode(['status' => 'error', 'msg' => '数据库连接失败']));
}

$curdate = date('Y-m-d');
    
$trkid = isset($_POST['trkId']) ? $_POST['trkId'] : null;
$trkid = filter_var($trkid, FILTER_SANITIZE_NUMBER_INT);

// 检查track ID是否有效
if (empty($trkid)) {
    echo json_encode(['status' => 'error', 'msg' => '无效的track ID']);
    exit;
}

$stmt = $connGWM->prepare("INSERT INTO tracklikes (tracklike, tracklikedate) VALUES (?, ?)");
// 检查SQL预处理是否成功
if (!$stmt) {
    echo json_encode(['status' => 'error', 'msg' => 'SQL预处理失败: ' . $connGWM->error]);
    exit;
}

$stmt->bind_param('is', $trkid, $curdate);
// 执行并返回结果
if ($stmt->execute()) {
    echo json_encode(['status' => 'success']);
} else {
    echo json_encode(['status' => 'error', 'msg' => '插入数据失败: ' . $stmt->error]);
}

$stmt->close();
$connGWM->close();
?>

同时可优化AJAX回调逻辑，根据后端返回信息做精准提示：

success: function(response) {
    var res = JSON.parse(response);
    alert(res.status === 'success' ? '统计成功' : '统计失败: ' + res.msg);
},
error: function(xhr, status, error) {
    alert('请求失败: ' + error);
}

4. 额外注意事项 #

• onplay事件会在用户每次点击播放（包括暂停后继续）时触发，若只需统计首次播放，可添加标记变量防止重复提交：

  var hasPlayed = false;
  function addPlays() {
      if (hasPlayed) return;
      hasPlayed = true;
      // 后续AJAX代码
  }
  

• 确认tracklikes表字段类型匹配：tracklike需为整数类型（对应trkid），tracklikedate需为日期类型。
• 打开浏览器开发者工具（F12）的Network标签，可查看AJAX请求的发送状态、返回内容，这是排查AJAX问题最直接的方式。

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