如何用AJAX实现博客点赞功能并插入PHP数据库

我正在开发博客文章页面，用AJAX实现心形点赞按钮功能，需求是点击按钮无需刷新页面就能向PHP数据库插入数据，但现在表单提交不正常。这是我第一次用AJAX提交表单，可能表述有问题请见谅。数据库表有5个字段：id、content、userID、username和date。

现有代码 #

JavaScript代码 #

$(document).ready(function() {
  $("#heart").click(function() {
    if ($("#heart").hasClass("liked")) {
      $("#heart").html('<i class="fa fa-heart-o" aria-hidden="true"></i>');
      $("#heart").removeClass("liked");
    } else {
      $("#heart").html('<i class="fa fa-heart" aria-hidden="true"></i>');
      $("#heart").addClass("liked");
      $("form#myform").submit(function(event) {
        event.preventDefault();
        var title = $("#title").val();
        var user = $("#user").val();
        var userID = $("#userID").val();
        var dte = $("#dte").val();

        $.ajax({
            type: "POST",
            url: "../PHP/user_functions.php",
            data: "title=" + content + "&user=" + user + "&dte=" + dte + "&userID=" + userID,
            success: function(){alert('success');}
        });
    });
    }
  });
});

CSS代码 #

.fa-heart-o {
  font-size:24px;
  color:black;
  cursor: pointer;
}

.fa-heart {
  font-size:24px;
  color: red;
  cursor: pointer;
}

.ggg{
  display:none;
}

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<form id="myform" action="../PHP/user_functions.php" method="post">

    <span class="" id="heart"><i class="fa fa-heart-o" aria-hidden="true"></i></span>

    <input type="hidden" id="title" value="How To Guide Title Example" name="content">
    <input type="hidden" id="user" value="TestBot" name="username">
    <input type="hidden" id="userID" value="<?php echo $userID ?>" name="sessionID">
    <input type="hidden" id="dte" value="<?php echo date('Y/m/d H:i:s'); ?>" name="date">

    <input class="ggg" type="submit" id="submitButton" name="submitButton" value="Submit">

</form>

PHP代码（user_functions.php） #

<?php
if (isset($_POST['submitButton'])) {

$username = $_POST['username'];
$userID = $_POST['userID'];
$date = $_POST['date'];
$content = $_POST['content'];

$sql = 'INSERT INTO `likes-blog` (username, userID, date, content) VALUES (:username, :userID, :date, :content)';
$stmt = $dbh->prepare($sql);
                                                              
$stmt->execute(['username' => $username, 'userID' => $userID, 'date' => $date, 'content' => $content]);

?>
<?php
}?>

问题分析与修复方案 #

核心问题点 #

1. AJAX触发逻辑错误：在点击心形按钮后才绑定表单submit事件，但未主动触发提交，导致AJAX代码从未执行。
2. 变量名不匹配：JS中定义了title变量，但AJAX数据里用了未定义的content。
3. 参数传递不对应：HTML中userID的name是sessionID，但PHP接收的是$_POST['userID']；AJAX未传递submitButton参数，导致PHP的判断条件不成立，无法执行插入。
4. 缺失取消点赞逻辑：仅处理点赞插入，未实现取消点赞时的数据库删除操作（可选）。

修复后的代码 #

修复后的JavaScript

$(document).ready(function() {
  $("#heart").click(function() {
    const $heart = $(this);
    if ($heart.hasClass("liked")) {
      // 可选：此处添加取消点赞的AJAX删除请求
      $heart.html('<i class="fa fa-heart-o" aria-hidden="true"></i>');
      $heart.removeClass("liked");
    } else {
      $heart.html('<i class="fa fa-heart" aria-hidden="true"></i>');
      $heart.addClass("liked");
      
      // 直接发起AJAX请求，无需绑定表单submit事件
      const content = $("#title").val();
      const user = $("#user").val();
      const userID = $("#userID").val();
      const dte = $("#dte").val();

      $.ajax({
        type: "POST",
        url: "../PHP/user_functions.php",
        // 用对象格式传参，避免字符串拼接错误，同时带上submitButton参数
        data: {
          submitButton: true,
          content: content,
          username: user,
          date: dte,
          userID: userID
        },
        success: function(response) {
          alert('点赞成功');
        },
        error: function(xhr) {
          console.error('请求失败:', xhr.responseText);
          alert('点赞失败，请重试');
          // 失败后恢复按钮状态
          $heart.html('<i class="fa fa-heart-o" aria-hidden="true"></i>');
          $heart.removeClass("liked");
        }
      });
    }
  });
});

修复后的HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<form id="myform" action="../PHP/user_functions.php" method="post">
    <span id="heart"><i class="fa fa-heart-o" aria-hidden="true"></i></span>
    <input type="hidden" id="title" value="How To Guide Title Example" name="content">
    <input type="hidden" id="user" value="TestBot" name="username">
    <!-- 修正name属性，与PHP接收参数一致 -->
    <input type="hidden" id="userID" value="<?php echo $userID ?>" name="userID">
    <input type="hidden" id="dte" value="<?php echo date('Y/m/d H:i:s'); ?>" name="date">
</form>

优化后的PHP代码

<?php
// 确保已正确初始化数据库连接$dbh
if (isset($_POST['submitButton'])) {
    // 增加参数默认值，避免未定义报错
    $username = $_POST['username'] ?? '';
    $userID = $_POST['userID'] ?? '';
    $date = $_POST['date'] ?? '';
    $content = $_POST['content'] ?? '';

    // 增加参数合法性校验
    if (!empty($username) && !empty($userID) && !empty($content)) {
        $sql = 'INSERT INTO `likes-blog` (username, userID, date, content) VALUES (:username, :userID, :date, :content)';
        $stmt = $dbh->prepare($sql);
        $stmt->execute([
            ':username' => $username,
            ':userID' => $userID,
            ':date' => $date,
            ':content' => $content
        ]);
        echo 'success';
    } else {
        echo '参数错误';
    }
}
?>

额外建议 #

• 增加重复点赞校验：点赞前通过AJAX查询数据库，判断用户是否已点赞该文章，避免重复插入。
• 完善取消点赞逻辑：点击已点赞按钮时，发起AJAX请求删除对应数据库记录。
• 使用console.log()替代alert()进行调试，更直观查看请求和响应信息。

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