求助：实现鼠标悬停Div时向MySQL写入日志的AJAX脚本

Hey，你已经找对路子了——AJAX确实是实现这个需求的核心，不过你的代码里有几个小细节出错了，导致它没法正常工作。我来帮你一步步梳理和修正：

1. 选择器匹配错误 #

你的Div元素用的是id="div0"，但脚本里用了类选择器$('.div0')，这会让jQuery找不到目标元素哦。得改成ID选择器$('#div0')才行。

2. 语法错误导致代码失效 #

你调用load()方法的时候，末尾少了一个闭合括号，直接导致代码语法报错。修正后的基础版本代码应该是这样：

<? echo "<div id='div0' rel=".$someid.">Some dynamic text</div>"; ?> 
<script>
$('#div0').mouseover(function() {
  // 修复选择器和语法问题
  $('#result').load('../../../system/molog.php?cid=' + $(this).attr('rel'));
});
</script>

3. 更推荐的写法：用POST请求处理写入操作 #

虽然GET请求也能完成写入，但POST更适合这类修改数据的场景——不仅能避免参数暴露在URL里，还能绕过浏览器缓存的干扰。这里给你换成$.post()的版本，还加了成功/失败的回调处理：

<? echo "<div id='div0' rel=".$someid.">Some dynamic text</div>"; ?> 
<script>
$('#div0').mouseover(function() {
  const cid = $(this).attr('rel');
  $.post('../../../system/molog.php', { cid: cid }, function(response) {
    // 请求成功后的反馈，比如更新页面上的结果区域
    $('#result').text('日志写入成功：' + response);
  }).fail(function() {
    // 请求失败时的提示，方便排查问题
    $('#result').text('日志写入失败，请检查服务器配置');
  });
});
</script>

4. 后端脚本molog.php的关键要点 #

你的后端必须正确接收参数并写入MySQL，而且一定要注意防止SQL注入！这里给你一个基础的安全示例（记得替换成你的数据库信息）：

<?php
// 数据库连接信息，替换成你自己的
$servername = "localhost";
$username = "your_db_user";
$password = "your_db_pass";
$dbname = "your_db_name";

// 建立连接
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
  die("数据库连接失败: " . $conn->connect_error);
}

// 获取前端传递的cid参数，兼容GET和POST
$cid = isset($_REQUEST['cid']) ? trim($_REQUEST['cid']) : '';

if (!empty($cid)) {
  // 使用预处理语句防止SQL注入
  $stmt = $conn->prepare("INSERT INTO your_log_table (cid, hover_timestamp) VALUES (?, NOW())");
  $stmt->bind_param("s", $cid); // "s"表示参数是字符串类型，根据你的字段类型调整
  $stmt->execute();
  
  echo "ID: {$cid} 的悬停日志已记录";
  $stmt->close();
} else {
  echo "缺少必要的cid参数";
}

$conn->close();
?>

最后几个小提醒 #

• 先确认molog.php的路径是否正确：可以直接在浏览器地址栏输入这个相对路径对应的完整URL，看看能不能正常访问
• 避免重复请求：如果用户快速多次悬停，会发送一堆请求，你可以加个防抖函数（比如设置300ms的延迟）来减少不必要的请求
• 开启错误日志：如果还是有问题，打开PHP的错误日志，能帮你快速定位后端的问题

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