如何在自定义导航中添加ajax购物车计数器？

<span id="cart-counter">0</span>

$(document).ready(function() {
  $.ajax({
    url: 'get_cart_count.php', // 替换为获取购物车数量的接口地址
    method: 'GET',
    success: function(response) {
      $('#cart-counter').text(response); // 更新计数器显示
    },
    error: function() {
      console.log('Failed to get cart count.'); // 处理错误情况
    }
  });
});

<?php
// get_cart_count.php

// 假设购物车数量存储在一个数据库中，这里简化为直接返回一个固定值
$cartCount = 10; // 替换为获取购物车数量的逻辑

echo $cartCount;
?>

$('#add-to-cart').click(function() {
  $.ajax({
    url: 'add_to_cart.php', // 替换为添加商品到购物车的接口地址
    method: 'POST',
    success: function(response) {
      // 更新购物车数量
      $.ajax({
        url: 'get_cart_count.php', // 替换为获取购物车数量的接口地址
        method: 'GET',
        success: function(response) {
          $('#cart-counter').text(response); // 更新计数器显示
        },
        error: function() {
          console.log('Failed to get cart count.'); // 处理错误情况
        }
      });
    },
    error: function() {
      console.log('Failed to add to cart.'); // 处理错误情况
    }
  });
});