将数据发送到 db 后刷新 div答案

【问题标题】：refresh div after sending data to db将数据发送到 db 后刷新 div
【发布时间】：2014-10-12 23:23:43
【问题描述】：

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

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

使用 ajax，我正在将产品添加到购物车……页面不会重新加载。商品加入购物车后如何刷新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>

谢谢！

【问题讨论】：

你没有调用任何会在success上重新加载页面的东西。
等等“刷新”是什么意思？你不能“刷新”一个你必须刷新页面的 div 或者只是在 div 中添加一些东西。

标签： php html ajax refresh

【解决方案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>

【讨论】：

【解决方案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，然后您将使用它来更新总价格元素。

【讨论】：

【解决方案3】：

您可以使用 angularjs 或 knockoutjs 之类的东西 - 对于 angular，您将更新您的模型 - 对于淘汰赛，您将使用 self.object.push(value) 即，

函数 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>

【讨论】：

如果您没有使用验证令牌来阻止 csfr，那么只需删除“标题”部分