Question

我有一个显示某些产品总和的div：

<div class="total-price"><?php echo (!empty($cart)) ? $cart['total'] : '0'; ?> $</div>

使用ajax，我将产品添加到购物车... se页面没有重新加载。将产品添加到购物车后如何刷新div？

我正在使用的ajax：

<script>
$('#order-to-cart').submit(function (e) {
    e.preventDefault();
    $.ajax({
        type: 'post',
        url: '/tdt/order',
        data: $(this).serialize(),
        success: function () {
            $(".success-message").slideDown().delay(5000).slideUp();
            $(".total-price").something...;
        }
    });
})
</script>

谢谢！

Answer 1

您可以这样做：

<script>
$('#order-to-cart').submit(function (e) {
    e.preventDefault();
    $.ajax({
        type: 'post',
        url: '/tdt/order',
        data: $(this).serialize(),
        success: function () {
            $(".success-message").slideDown().delay(5000).slideUp();
            var oldPrice = $('.total-price').text() * 1;
            var itemPrice = "15"; //the price that should be added
            $('.total-price').text(oldPrice + itemPrice);
        }
    });
})
</script>

Answer 2

您应该从/ tdt / order路径返回一个总篮值。

在PHP脚本中，您应该使用所有必需信息回显一些JSON数据，例如

echo json_encode(array("totalPrice" => "£10.01"));

然后，您需要将此信息解析为Javascript并更新页面元素;

<script>
$('#order-to-cart').submit(function (e) {
    e.preventDefault();
    $.ajax({
        type: 'post',
        url: '/tdt/order',
        dataType: 'json',
        data: $(this).serialize(),
        success: function (data) {
            $(".success-message").slideDown().delay(5000).slideUp();
            $('.total-price').val(data.totalPrice);
        }
    });
})
</script>

上面的ajax请求会期望返回的数据是JSON，然后您将使用它来更新total-price元素。

Answer 3

你可以使用像angularjs或knockoutjs这样的东西 - 你可以更新你的模型 - 你可以使用self.object.push（value），例如，

    
      function OrderViewModel() {

        var self = this;            
        self.myOrder = ko.observableArray([]);

        self.addOrderItem = function () {
            $.ajax({
                type: "post",
                url: "yourURL",
                data: $("#YOURFORMFIELDID").serialize(),
                dataType: "json",
                success: function (value) {
                    self.myOrder.push(value);
                },
                headers: {
                    'RequestVerificationToken': '@TokenHeaderValue()'
                }
            });

        }
   }
 ko.applyBindings(new orderViewModel());
</script>
</pre>

将数据发送到db后刷新div

3 个答案: