Question

您好我已经开了一家电子商店，我想要实现的是当我点击相应的＆＃34;添加到购物车按钮＆＃34;我想要更新顶部购物车（不是电子商店的主要购物车页面）。顶部购物车是eshop头部的一个div。当我刷新页面时，会显示正确的内容，但这不会在没有刷新的情况下发生。我知道这必须用ajax完成，但似乎我做错了。

我的部分代码：

<input type="button" class="add_to_cart" id="add_to_cart" value="BUY" />
<script type="text/javascript">
    $('input.add_to_cart').click(function () {
        $.ajax({ 
            type: "POST",
            url:"add_to_topcart.php",
            data:$('.prod_form').serialize(), 
            success:function(data){
                $('#show-quick-cart').text(data); 
               $(".add_cart_msg").delay(250).fadeIn("slow").delay(2000).fadeOut("slow");
             }
         });
     });
</script>
</form>
</div>

<div class="add_cart_msg" style="display:none;"><img src="images/green_tick.png"/>Product was added to cart!</div>

上面的结果是临时计算我添加到购物车的产品

Answer 1

首先，将您的代码放在文档就绪处理程序中 -

$(document).ready(function() {
    $('input.add_to_cart').click(function () {
        $.ajax({ 
            type: "POST",
            url:"add_to_topcart.php",
            data:$('.prod_form').serialize(), 
            success:function(data){
                $('#show-quick-cart').text(data); 
                $(".add_cart_msg").delay(250).fadeIn("slow").delay(2000).fadeOut("slow");
            }
        });
     });
});

然后打开浏览器的控制台，将记录任何错误。然后，如果您需要帮助进行故障排除，则可以一次修复一个或将它们发布到此处。

用ajax更新购物车

1 个答案: