Question

我正在开发小型电子商务，我正在尝试在项目添加到商品时立即更新购物车中的商品数量。

我确定我错过了一步，因为除非页面刷新，否则购物车不会更新。

Div添加项目：

<div class="buy_button">
  <h2><a href="#" class="addtocart" id="<?php echo $item_id ?>">Add item</a></h2>
</div>

需要异步更新的Div：

<div id="cart">

//SQL query to get count of items in table

<h2><?php echo $item_count ?></h2>
</div>

$(function() {
$(".addtocart").click(function(){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$.ajax({
type: "POST",
url: "ajax_add.php",
data: info,
});

return false;
});
});

这是ajax_add.php：

if($_POST['id']) {

//SQL query to save item in table 
//SQL query to count items in table

<div id="cart">
//SQL query to get count of items in table
    <h2><?php echo $item_count ?></h2>
</div>
}

Answer 1

你必须对AJAX调用的响应做些什么。

$(function() {
    $(".addtocart").click(function(){
        var element = $(this);
        var I = element.attr("id");
        var info = 'id=' + I;
        $.ajax({
            type: "POST",
            url: "ajax_add.php",
            data: info,
            success: function(response) {
                $("#cart").replaceWith(response);
            }
        });
        return false;
    });
});

Answer 2

首先，您的语法错误，应该在控制台中抛出错误。

数据：信息，

您在传递给ajax方法的对象上有一个尾随逗号。

另外，您没有回调函数来处理数据。考虑到您提供的代码，您将更新计数：

$.ajax({
    type: "POST",
    url: "ajax_add.php",
    data: info,
    success: function (data) {
        $('#cart h2').text($(data).find('#cart h2').text());
    }
});

让ajax_add.php返回一个json对象或只是更新的计数值肯定会更好。

单击div A时异步更新div B.

2 个答案: