Question

我用单独的页面制作购物车。单击查看购物车按钮时，我会加载购物车的php文件。我在哪里循环购物车会话变量array并在页面中显示。但是，当用户按下某个项目的删除按钮时，应将其删除，并在购物车页面后显示。现在，如何在不重新加载页面的情况下自动更新购物车页面？

我需要知道如何实现这个？

循环部分

<?php foreach($_SESSION['cart'] as $result)
                            {
                                ?>

删除按钮

<div class="col-sm-6">
   <div class="row">
      <div class="col-sm-2">
        <h6><strong><?php echo $result['price']; ?><span class="text-muted"> x</span></strong></h6>
      </div>
      <div class="col-sm-4">
        <input type="text" class="form-control input-sm" value=<?php echo $result['quantity']; ?>>
      </div>
      <div class="col-sm-2">
        <button type="button" class="btn btn-link btn-sm">
           <span class="fa fa-trash"> </span>
        </button>
      </div>
    </div>
 </div>

完整源代码here

编辑1
假设我通过ajax调用

获取了该页面

$.ajax(
    {
        url: 'makeCartPage.php',
        type: 'POST',
        success: function(msg)
        {
            //here to code to show the new cart page/information
        },
        error: function()
        {
            console.log('cart error');
        }              
    });

但是，显示ajax返回数据存在挑战。

Answer 1

有几种方法可以做到这一点，但一种方法是不刷新列表，而是隐藏你删除的项，所以将类添加到顶级行包装类，如product-wrapper或者什么 - 具备-你：

<div class="row product-wrapper">

当您单击x按钮时，运行ajax，在makeCartPage.php页面上更新会话，并在成功时使用$(this)遍历DOM并隐藏{{1 } .class。类似的东西：

product-wrapper

这应该足以让您入门。这是隐藏fx的小提琴：

https://jsfiddle.net/efL891mu/

如何在用户删除项目时自动更新购物车？

循环部分

1 个答案: