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

我正在从事小型电子商务，我正在尝试在购物车中添加商品后立即更新商品数量。

我确信我错过了一个步骤，因为除非页面刷新，购物车不会更新。

要添加项的Div：

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

下面是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>
}

if（$\u POST['id']））{
//用于在表中保存项的SQL查询
//统计表中项目的SQL查询
//获取表中项目计数的SQL查询
}

您必须处理来自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;
    });
});

---

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

数据：信息

在传递给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对象或仅返回更新的计数值当然更好。

您的ajax调用似乎对返回的数据没有任何作用，而且您的php脚本每次只应返回一个数字，而不是HTML片段。大多数浏览器都允许在对象中使用额外的逗号。

$(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;
    });
});

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