ajax json实现购物车

AJAX（Asynchronous JavaScript and XML）和JSON（JavaScript Object Notation）是现代Web应用程序中广泛使用的技术。其中，AJAX是一种通过JavaScript异步加载数据的方法，JSON则是一种轻量级的数据交换格式。

在电商网站中，购物车是一个必不可少的功能。在不刷新页面的情况下，实现添加或移除商品、计算总价等操作，就需要使用AJAX和JSON。

$(document).ready(function(){
    // 添加商品
    $('.add-to-cart').click(function(){
        var item_id = $(this).data('item_id');
        $.ajax({
            url: '/cart/add',type: 'POST',dataType: 'json',data: {'item_id': item_id},success: function(data){
                // 更新购物车内商品数量
                $('.cart-count').text(data.cart_count);
                // 更新总价
                $('.cart-total-price').text(data.total_price);
            }
        });
    });
    // 移除商品
    $('.remove-from-cart').click(function(){
        var item_id = $(this).data('item_id');
        $.ajax({
            url: '/cart/remove',success: function(data){
                // 更新购物车内商品数量
                $('.cart-count').text(data.cart_count);
                // 更新总价
                $('.cart-total-price').text(data.total_price);
            }
        });
    });
});

上述代码是一个简单的购物车实现示例。当点击“添加商品”按钮时，会发送一个POST请求到服务器端，服务器返回的JSON数据包括购物车内商品数量和总价。同样地，当点击“移除商品”按钮时，也会发送POST请求到服务器端，更新购物车内商品数量和总价。前端页面比较简单，只需要使用jQuery库来发送AJAX请求和操作DOM元素即可。

总之，AJAX和JSON可以让网页交互更加流畅和易用，是实现购物车等功能的重要工具。