用ajax更新购物车

Question

您好，我创建了一个 eshop，我想要实现的是，当我单击相应的“添加到购物车按钮”时，我希望更新顶部购物车（不是 eshop 的主购物车页面）。顶部购物车是 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");
            }
        });
     });
});

然后打开浏览器的控制台，任何错误都会被记录下来。然后，您可以一次修复一个问题或在您需要故障排除帮助时将其发布在此处。