ajax实现json购物车

AJAX（Asynchronous JavaScript and XML）技术是一种通过异步方式在网页上进行数据交互的技术，可以实现页面无需刷新就能进行数据的刷新和加载。JSON（JavaScript Object Notation）则是一种轻量级的数据交换格式，易于阅读和编写，同时也易于机器解析。

在使用AJAX实现购物车功能时，可以使用JSON来传输购物车相关的数据。具体实现可以参照下面的代码：

//获取购物车中已有商品的数量
var cartCount = 0;
if(localStorage.getItem('cart')){
  cartCount = JSON.parse(localStorage.getItem('cart')).length;
}
document.getElementById('cart-count').innerHTML = cartCount;

//向购物车中添加商品
document.getElementById('add-to-cart').addEventListener('click',function(){
  var product = {
    id: 1,name: '商品1',price: 100
  }
  var cart = [];
  if(localStorage.getItem('cart')){
    cart = JSON.parse(localStorage.getItem('cart'));
  }
  cart.push(product);
  localStorage.setItem('cart',JSON.stringify(cart));
  document.getElementById('cart-count').innerHTML = cart.length;
});

//从购物车中删除商品
document.getElementById('remove-from-cart').addEventListener('click',function(){
  var cart = JSON.parse(localStorage.getItem('cart'));
  cart.splice(0,1);
  localStorage.setItem('cart',JSON.stringify(cart));
  document.getElementById('cart-count').innerHTML = cart.length;
});

上面的代码中，首先在页面加载完毕后获取已有商品的数量，若购物车中没有商品，则数量为0。然后在商品添加和删除按钮的点击事件中，分别获取已有的购物车数据，并使用JSON来进行数据的存储和传输。最后，更新页面上的购物车数量。

总的来说，AJAX和JSON的结合使用可以极大地提高网站的用户体验，使用户在浏览商品和进行购物时更加流畅和方便。