如何用Ajax jQuery实现PHP点赞按钮后台请求及状态切换

一、jQuery代码的放置位置 #

• 直接放在页面底部的</body>标签之前，无需额外包裹DOM加载判断，此时页面元素已加载完成；
• 若要放在<head>标签内，需用$(function(){ ... })包裹代码，确保DOM加载完成后再执行。

二、调整页面中的a标签 #

为了更灵活地切换状态和请求地址，给原标签添加data属性存储关键信息，同时禁用默认跳转：

<a href="javascript:void(0)" 
   data-profile-id="<?php echo $profile->profile_id; ?>" 
   data-is-liked="false" 
   data-like-url="https://www.username.com/liked/<?php echo $profile->profile_id; ?>" 
   data-unlike-url="https://www.username.com/unliked/<?php echo $profile->profile_id; ?>" 
   class="btn btn-outline-dark btn-sm like-btn">
  <i class="far fa-thumbs-up me-1"></i>Like
</a>

• data-is-liked：标记当前是否已点赞，初始为false（未点赞）；
• data-like-url/data-unlike-url：分别存储点赞和取消点赞的后台请求地址；
• class="like-btn"：给按钮添加统一类名，方便JS绑定事件。

三、核心jQuery实现代码 #

// 确保DOM加载完成后执行
$(function() {
  // 绑定点赞按钮的点击事件
  $('.like-btn').on('click', function() {
    var $btn = $(this);
    // 获取当前点赞状态
    var isLiked = $btn.data('is-liked');
    // 根据状态选择要请求的后台地址
    var requestUrl = isLiked ? $btn.data('unlike-url') : $btn.data('like-url');

    // 发送Ajax后台请求
    $.ajax({
      url: requestUrl,
      type: 'POST', // 可根据后端接口要求改为GET
      success: function(response) {
        // 请求成功后切换按钮状态
        if (isLiked) {
          // 切换为未点赞状态
          $btn.data('is-liked', false);
          $btn.html('<i class="far fa-thumbs-up me-1"></i>Like');
          // 可选：修改按钮样式，比如$btn.removeClass('btn-outline-primary').addClass('btn-outline-dark')
        } else {
          // 切换为已点赞状态
          $btn.data('is-liked', true);
          $btn.html('<i class="fas fa-thumbs-up me-1"></i>Liked');
          // 可选：修改按钮样式，比如$btn.removeClass('btn-outline-dark').addClass('btn-outline-primary')
        }
      },
      error: function() {
        // 请求失败时提示用户
        alert('操作失败，请稍后重试');
      }
    });
  });
});

四、关键说明 #

1. 确保页面已引入jQuery库，建议通过本地文件引入；
2. 后端需实现liked/[profile_id]和unliked/[profile_id]两个接口，处理点赞/取消点赞的业务逻辑；
3. 可根据需求调整Ajax请求的参数、响应处理逻辑，以及按钮的样式变化。

内容的提问来源于stack exchange，提问作者SHAUJANYA -ALL I KNOW TO YOU