如何实现博客点赞后不跳转、保持页面位置的无刷新交互

✅ 推荐方案：AJAX + jsON（无刷新交互）

这是最专业、用户体验最优的解法。核心思路是：前端用 JavaScript 拦截表单提交，发起异步请求；后端仅返回 json 响应；前端解析后直接更新对应 DOM 元素。

步骤一：改造 PHP 后端为独立 API 端点

新建 like_handler.php（避免混杂 HTML 逻辑）：

<?php header('Content-Type: application/json; charset=utf-8'); $conn = mysqli_connect("localhost", "root", "", "amoscaguias_db"); if (!$conn) {     echo json_encode(['success' => false, 'message' => 'DB connection failed']);     exit; }  if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'like') {     $post_id = (int)$_POST['post_id'];     // 使用安全参数化查询（修正原代码 SQL 注入风险）     $stmt = $conn->prepare("UPDATE blog_data SET very_like = very_like + 1 WHERE id = ?");     if ($stmt->execute([$post_id])) {         // 查询新值用于前端显示         $stmt2 = $conn->prepare("select very_like FROM blog_data WHERE id = ?");         $stmt2->execute([$post_id]);         $new_count = $stmt2->get_result()->fetch_row()[0];         echo json_encode(['success' => true, 'count' => $new_count]);     } else {         echo json_encode(['success' => false, 'message' => 'Update failed']);     } } else {     echo json_encode(['success' => false, 'message' => 'Invalid request']); } ?>

⚠️ 注意事项：

• 必须移除 header(“Location: …”) 和 exit()，改用 JSON 响应；
• 禁用 SELECT + UPDATE 两步操作，直接 UPDATE … SET col = col + 1 更原子、高效；
• 严格校验 $_POST 参数类型（如 (int) 强制转换），杜绝 SQL 注入；
• 添加 CORS 头（如需跨域）：header(“access-Control-Allow-Origin: *”);

步骤二：前端 JavaScript 拦截并处理

在 myscript.js 中添加：

document.addEventListener('DOMContentLoaded', () => {     // 为所有点赞按钮绑定事件（委托给父容器更高效）     document.body.addEventListener('click', function(e) {         if (e.target.closest('.increase_btn')) {             e.preventDefault();             const btn = e.target.closest('.increase_btn');             const postId = btn.closest('form').querySelector('input[name="post_id"]').value;             const countSpan = btn.closest('.post-footer').querySelector('span:first-of-type');              fetch('like_handler.php', {                 method: 'POST',                 headers: { 'Content-Type': 'application/x-www-form-urlencoded' },                 body: `action=like&post_id=${postId}`             })             .then(res => res.json())             .then(data => {                 if (data.success) {                     // 乐观更新：先+1，后服务端确认（提升感知速度）                     countSpan.textContent = parseInt(countSpan.textContent) + 1;                     // 或使用服务端返回值：countSpan.textContent = data.count;                 } else {                     alert('点赞失败：' + data.message);                 }             })             .catch(err => console.error('AJAX error:', err));         }     }); });

步骤三：精简 HTML 表单（移除 action & method）

将原

<!-- 替换原 form 区域 --> <button type="button" class="increase_btn" data-post-id="<?php echo $q['id']; ?>">     <i class="bi bi-hand-thumbs-up"></i> </button> <span><?php echo $q['very_like']; ?></span>

✅ 优势总结：

• 零页面跳转，滚动位置完全保留；
• 响应更快（无需重载 CSS/JS/HTML）；
• 可轻松扩展错误状态、加载动画、防重复点击等；
• 符合前后端分离趋势，利于后期维护。

⚠️ 备选方案：锚点跳转（仅限必须用表单时）

若因历史原因无法引入 JS，可退而求其次：

1. 为每个文章区块添加唯一 ID（如
   ）；

2. 表单中增加隐藏字段
   发表于：后端开发

   近两天内
   # access# ajax# class# dom# echo# input# int# js# json# location# select# sql# 异步# 数据库

   复制链接