通过Ajax将关注按钮属性切换为取消关注按钮属性的方案咨询

嘿，这个问题其实不难解决～我给你两个常用的思路，你可以根据自己的代码习惯选：

方案一：用单个按钮动态切换属性与行为 #

这种方式更简洁，不用维护两个按钮，只需要在Ajax请求成功后修改按钮的data-*属性、文本和样式即可：

HTML 初始渲染 #

根据用户当前的关注状态，渲染对应的按钮初始状态：

<!-- 示例：初始未关注状态 -->
<button id="followToggleBtn" data-action="follow" data-user-id="123" class="btn btn-primary">关注</button>

JavaScript 逻辑 #

绑定点击事件，发起Ajax请求后切换按钮属性：

const toggleBtn = document.getElementById('followToggleBtn');

toggleBtn.addEventListener('click', async function(e) {
  const currentAction = this.dataset.action;
  const userId = this.dataset.userId;

  try {
    // 发起Ajax请求（这里用fetch示例，你也可以用jQuery.ajax）
    const response = await fetch(`/api/${currentAction}/${userId}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        // 别忘了CSRF令牌，避免请求被拦截
        'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content || ''
      }
    });

    const result = await response.json();
    if (result.success) {
      // 切换按钮的属性、文本和样式
      if (currentAction === 'follow') {
        this.dataset.action = 'unfollow';
        this.textContent = '取消关注';
        this.classList.remove('btn-primary');
        this.classList.add('btn-secondary');
      } else {
        this.dataset.action = 'follow';
        this.textContent = '关注';
        this.classList.remove('btn-secondary');
        this.classList.add('btn-primary');
      }
    } else {
      alert(result.message || '操作失败，请重试');
    }
  } catch (err) {
    console.error('请求出错:', err);
    alert('网络错误，请稍后再试');
  }
});

方案二：维护两个按钮，切换显示状态+修改属性 #

如果你坚持用两个独立按钮，那核心就是在Ajax成功后切换它们的显示状态，同时按需修改属性：

HTML 初始渲染 #

根据初始状态控制按钮的显示/隐藏：

<!-- 初始未关注：显示关注按钮，隐藏取消关注按钮 -->
<button id="followBtn" data-user-id="123" class="btn btn-primary" style="display: block;">关注</button>
<button id="unfollowBtn" data-user-id="123" class="btn btn-secondary" style="display: none;">取消关注</button>

JavaScript 逻辑 #

分别绑定两个按钮的点击事件，请求成功后切换显示状态：

// 关注按钮事件
document.getElementById('followBtn').addEventListener('click', async function(e) {
  const userId = this.dataset.userId;
  try {
    const response = await fetch(`/api/follow/${userId}`, { method: 'POST', /* 其他配置 */ });
    const result = await response.json();
    if (result.success) {
      // 隐藏关注按钮，显示取消关注按钮
      this.style.display = 'none';
      document.getElementById('unfollowBtn').style.display = 'block';
      // 如果需要修改取消关注按钮的属性，比如更新额外数据
      // document.getElementById('unfollowBtn').dataset.someAttr = 'newValue';
    }
  } catch (err) {
    console.error(err);
    alert('操作失败');
  }
});

// 取消关注按钮事件
document.getElementById('unfollowBtn').addEventListener('click', async function(e) {
  const userId = this.dataset.userId;
  try {
    const response = await fetch(`/api/unfollow/${userId}`, { method: 'POST', /* 其他配置 */ });
    const result = await response.json();
    if (result.success) {
      // 隐藏取消关注按钮，显示关注按钮
      this.style.display = 'none';
      document.getElementById('followBtn').style.display = 'block';
      // 同理，修改关注按钮属性（如果需要）
    }
  } catch (err) {
    console.error(err);
    alert('操作失败');
  }
});

几个注意事项 #

• 一定要处理Ajax请求的错误情况，给用户明确的反馈（比如弹窗提示）
• 别忘了传递CSRF令牌，很多后端框架会拦截没有令牌的POST请求
• 如果用jQuery的话，代码可以更简洁（比如用$.ajax和toggle()方法），但原生JS完全能实现需求
• 用data-*属性存储用户ID、操作类型这些数据，比硬编码在JS里更灵活

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