如何基于购物车计数通过ajax添加和移除class且无需页面加载

核心逻辑说明 #

不存在默认在计数增减时自动触发的AJAX请求，所有AJAX请求都需要你在对应操作节点主动发起。你只需要在购物车增减的AJAX请求成功回调中，拿到最新计数后同步处理class的增删即可，全程不需要刷新页面。

基础实现方案 #

你可以把计数更新和class处理封装为公共函数，在所有购物车操作的AJAX回调中统一调用即可：

// 公共处理函数：更新购物车计数 + 处理class增删
function syncCartStatus(newCount) {
  // 替换为你页面中购物车计数元素的实际选择器
  const cartCountElement = document.querySelector('.cart-count');
  // 替换为你需要新增的class名称
  const activeClass = 'cart-has-goods';

  // 更新计数显示
  cartCountElement.textContent = newCount;
  // 按计数处理class
  if (newCount >= 1) {
    cartCountElement.classList.add(activeClass);
  } else if (newCount === 0) {
    cartCountElement.classList.remove(activeClass);
  }
}

// 示例：添加商品到购物车的AJAX请求
function addGoodsToCart(goodsId) {
  fetch('/api/cart/add', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      goods_id: goodsId
    })
  })
  .then(res => res.json())
  .then(resData => {
    // 请求成功后调用公共函数，传入接口返回的最新购物车计数
    syncCartStatus(resData.cart_total_count);
  })
}

// 减少/删除购物车商品的AJAX请求逻辑同上，成功后调用syncCartStatus传入最新计数即可

自动监听适配方案 #

如果你的页面里有多处逻辑会修改购物车计数，不想每个AJAX回调都手动调用函数，可以用MutationObserver监听计数元素的内容变化，自动同步class状态：

const cartCountElement = document.querySelector('.cart-count');
const activeClass = 'cart-has-goods';

// 创建监听器
const countObserver = new MutationObserver(() => {
  const currentCount = parseInt(cartCountElement.textContent.trim()) || 0;
  if (currentCount >= 1) {
    cartCountElement.classList.add(activeClass);
  } else {
    cartCountElement.classList.remove(activeClass);
  }
});

// 启动监听：监听元素内容的变化
countObserver.observe(cartCountElement, {
  childList: true
});

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