Codeigniter 3 购物车自定义函数 AJAX 错误

Question

大家好，过去一周我一直在绞尽脑汁试图解决这个问题。基本上我在我的应用程序中使用 Codeigniter 3 购物车库。由于它具有标准的添加到购物车和从购物车中删除产品的功能，因此我尝试向前迈出一步并尝试使用 AJAX 实现一个数量增加按钮以使其变得更好。

所以在我的购物车视图中，我有一个减号按钮（将数量减少 1），然后是一个显示值数量的输入，最后是一个将数量增加 1 的加号按钮。

我的问题是一个按钮工作正常，而另一个按钮不起作用。如果我更改减号按钮的逻辑以将数量加 1 而不是减去 1，它仍然会按预期工作。

当我单击按钮 (add_one_product) 时，它无法将我的数量增加 1，而是刷新我的页面并在控制台中显示以下错误：

[弃用] 主线程上的同步 XMLHttpRequest 已弃用，因为它会对最终用户的体验产生不利影响。如需更多帮助，请查看 https://xhr.spec.whatwg.org/.
[违规] 向滚动阻塞 'touchstart' 事件添加了非被动事件侦听器。考虑将事件处理程序标记为 'passive' 以使页面更具响应性。参见 https://www.chromestatus.com/feature/5745543795965952
[违规] 'load' 处理程序耗时 2308 毫秒

我已经阅读了有关同步 XHR、touchstart 事件侦听器错误等的信息，但我仍然不知道如何修复它。

在这里我分享我的代码希望比我有更好的眼光和更多经验的人可以帮助指出我缺少的是什么。

这是我的控制器：

    function show_cart() {
        $output = '';
        $no = 0;
        foreach ($this->cart->contents() as $items) {
            $no++;
            $output .='
                    <tr>
                        <th class="text-center" scope="row">
                            <div class="row">
                                <div class="col-lg-3 col-md-3 offset-lg-2 offset-md-2 p-0" style="background-image: url('.base_url($items['thumbnail']).'); background-size: cover;">
                                </div>
                                <div class="col-lg-6 col-md-6 p-3" style="text-align:left; margin-left:20px;font-size: 17px;font-family: ProximaNova;letter-spacing: 1px; text-transform: uppercase;">
                                    '.$items['name'].'<br><br>
                                    <button type="button" id="'.$items['rowid'].'" class="remove_cart btn  btn-sm px-0" style="font-weight: 700; color: #892826;text-decoration: underline;font-size: 12px;font-family: ProximaNova;letter-spacing: 1px; background-color: white;">Remove</button>
                                </div>
                            </div>
                        </th>
                        <td class="font-weight-bold" style="padding-top: 40px;font-size: 17px;font-family: ProximaNova;letter-spacing: 1px;">RM&nbsp'.number_format($items['price'],2).'</td>
                        <td>
                            <div class="input-group w-30" style="padding-top: 25px;">
                                <span class="input-group-btn">
                                    <button type="button" id="'.$items['rowid'].'" class="remove_one_product btn btn-default btn-number" style="border: 1px solid #892826; color: white; background: #892826;"><span class="glyphicon glyphicon-minus"></span>
                                    </button>
                                </span>
                                <input type="text" style="border: 1px solid #892826" name="qty" class="form-control input-number text-center" value="'.$items['qty'].'" min="0" max="100">
                                <span class="input-group-btn">
                                    <button type="button" id="'.$items['rowid'].'" class="add_one_product btn btn-default btn-number" style="border: 1px solid #892826; color: white; background: #892826;"><span class="glyphicon glyphicon-plus"></span>
                                    </button>
                                </span>
                            </div>
                        </td>
                        <td class="font-weight-bold" style="padding-top:40px;font-size: 17px;font-family: ProximaNova;letter-spacing: 1px;">RM&nbsp'.number_format($items['subtotal'],2).'</td>
                    </tr>
            ';
        }
            $output .= '
            <tr>
                <th style="width:10%;"></th>
                <td style="width:10%;"></td>
                <td style="width:10%;"></td>
                <td style="width:70%;"><h3 style="margin-right: 60px; font-size: 24px; font-weight:bold;margin-top:5px;font-family: ProximaNova;letter-spacing: 1px;">'.'TOTAL: RM '.number_format($this->cart->total(),2).'</h3></td>
            </tr>
            ';
        return $output;
    }

    function add_one_product() {

        $rowid = $this->input->post('row_id');
        $cart=$this->cart->contents();

        foreach ($cart as $items) {
            if($rowid == $items['rowid']){
                $qty = $items['qty'];
            }
        }

        $data = array(
            'rowid' => $rowid,
            'qty' => $qty + 1,
        );
        $this->cart->update($data);
        echo $this->show_cart();
    }

    function remove_one_product() {

        $rowid = $this->input->post('row_id');
        $cart=$this->cart->contents();

        foreach ($cart as $items) {
            if($rowid == $items['rowid']){
                $qty = $items['qty'];
            }
        }

        $data = array(
            'rowid' => $rowid,
            'qty' => $qty - 1,
        );
        $this->cart->update($data);
        echo $this->show_cart();
    }

此时类的按钮和功能以及add_one_product和remove_one_product的名称是相同的，保存命名约定和它所做的+1与-1操作到购物车中的产品数量。

在 show_cart 函数中也调用了按钮，为了提高可见性，我将在此处重新裁剪它们：

<div class="input-group w-30" style="padding-top: 25px;">
  <span class="input-group-btn">
    <button type="button" id="'.$items['rowid'].'" class="remove_one_product btn btn-default btn-number" style="border: 1px solid #892826; color: white; background: #892826;"><span class="glyphicon glyphicon-minus"></span>
    </button>
  </span>
  <input type="text" style="border: 1px solid #892826" name="qty" class="form-control input-number text-center" value="'.$items['qty'].'" min="0" max="100">
  <span class="input-group-btn">
    <button type="button" id="'.$items['rowid'].'" class="add_one_product btn btn-default btn-number" style="border: 1px solid #892826; color: white; background: #892826;"><span class="glyphicon glyphicon-plus"></span>
    </button>
  </span>
</div>

最后在我的页脚中 jquery:

  $(document).ready(function(){
    $(document).on('click','.remove_one_product',function(){
      var row_id=$(this).attr("id");
      $.ajax({
        url : "<?php echo base_url('products/remove_one_product');?>",
        method : "POST",
        data : {row_id : row_id},
        success :function(data){
          $('#product_detail_cart').html(data);
          $('#cart-counter').load(location.href + " #cart-counter");
          $('#nav-tab').load(location.href + " #nav-tab");
          $('#nav-home-tab').load(location.href + " #nav-home-tab");
          $('#nav-profile-tab').load(location.href + " #nav-profile-tab");
        }
      });
    });
  });

  $(document).ready(function(){
    $(document).on('click','.add_one_product',function(){
      var row_id=$(this).attr("id");
      $.ajax({
        url : "<?php echo base_url('products/add_one_product');?>",
        method : "POST",
        data : {row_id : row_id},
        success :function(data){
          $('#product_detail_cart').html(data);
          $('#cart-counter').load(location.href + " #cart-counter");
          $('#nav-tab').load(location.href + " #nav-tab");
          $('#nav-home-tab').load(location.href + " #nav-home-tab");
          $('#nav-profile-tab').load(location.href + " #nav-profile-tab");
        }
      });
    });
  });

我知道这是一篇很长的文章post，感谢那些花时间阅读它的人。欢迎任何帮助和建设性的批评。

Answer 1

这是迄今为止我犯过的最愚蠢的错误之一，我想我以后肯定会犯更多错误，但为了帮助其他有类似问题的人，我的问题是我写了remove_one_product 的配置，但我忘记为 add_one_product.

编写相同的配置

脸掌

Codeigniter 3 购物车自定义函数 AJAX 错误

Codeigniter 3 Shopping Cart Custom Function AJAX error

php

jquery

ajax

codeigniter-3

shopping-cart