使用Ajax和Javascript，按数量增加和减少按钮将数量添加到购物车中已有项目的小计中无法使用：)

分类：编程问答

如何解决使用Ajax和Javascript，按数量增加和减少按钮将数量添加到购物车中已有项目的小计中无法使用：)

简短地描述问题：

CLICK on the image QTY buttons up and down

QTY按钮可以简单地增加数量，在添加复杂度的ajax部分来增加购物车中已有商品的小计价值之前，现在这里按钮停止了工作，也没有解析数据以开始增加数量特定产品，它还会添加到购物车中产品的已计算出的小计价值中。

我尝试搜索其他解决方案，但是我还没有足够的经验来尝试将它们混用。但是我确实检查了Firefox和Chrome中的开发工具，并且目前没有任何错误显示。我尝试了一些修复程序并消除了所有可能的错误，但我无法找出问题所在。

我想可能是语法的书写或嵌套顺序可能存在问题，我想还是我完全错了。

我看了很多年的堆栈溢出，但是我从未尝试过更复杂的项目，但是现在我决定要进入编程领域，所以我也想更多地参与其中。

希望有人可以帮助解决这种奇怪的情况。

这是工作版本，如果有人可以在此处正确连接逻辑，则我留下了let语句和价格上涨的准备语句。 我在这里删除了AJAX =>按钮现在可以上下移动，但显然不会影响购物车小计价格的变化。

  /* NOTE PRODUCT QTY UP AND DOWN */
  let $qty_up = $(".qty .qty-up");
  let $qty_down = $(".qty .qty-down");
  let $deal_price = ("#deal-price");
  //let $input = $(".qty .qty_input");

  /* NOTE CLICK ON QTY UP BUTTON */
  $qty_up.click(function (e) {

    let $input = $(`.qty_input[data-id='${$(this).data("id")}']`);
    let $price = $(`.product_price[data-id='${$(this).data("id")}']`);
    

          if ($input.val() >= 1 && $input.val() <= 9) {
            $input.val(function (i,oldval) {
              return ++oldval;
            });
          
            // NOTE INCREASE THE PRICE OF THE PRODUCT
            $price.text(parseInt(item_price * $input.val()).toFixed(2));

            // NOTE SET SUBTOTAL PRICE
            let subtotal = parseInt($deal_price.text()) + parseInt(item_price);
            $deal_price.text(subtotal.toFixed(2));
          
          }  
  });

  /* NOTE CLICK ON QTY DOWN BUTTON */
  $qty_down.click(function (e) {

    let $input = $(`.qty_input[data-id='${$(this).data("id")}']`);
    let $price = $(`.product_price[data-id='${$(this).data("id")}']`);

          if ($input.val() > 1 && $input.val() <= 10) {
            $input.val(function (i,oldval) {
              return --oldval;
            });
          
            // NOTE INCREASE THE PRICE OF THE PRODUCT
            $price.text(parseInt(item_price * $input.val()).toFixed(2));

            // NOTE SET SUBTOTAL PRICE
            let subtotal = parseInt($deal_price.text()) - parseInt(item_price);
            $deal_price.text(subtotal.toFixed(2));
          
          }

  });

完整的index.js脚本，因为它与Owl Carousel插件具有直接关联。因此，这里是：这是使用AJAX（JQuery）单击时上下按钮的非工作版本！

// NOTE OWL CAROUSEL DOCUMENT READY

$(document).ready(function () {

  /* BANNER OWL 2 CAROUSEL */
  $("#banner-area .owl-carousel").owlCarousel({
    dots: true,items: 1,});

  /* NOTE TOP SALE OWL 2 CAROUSEL */
  $("#top-sale .owl-carousel").owlCarousel({
    loop: true,nav: true,dots: false,responsive: {
      0: {
        items: 1,},600: {
        items: 3,1000: {
        items: 5,});

  /* NOTE ISOTOPE FILTER */
  var $grid = $(".grid").isotope({
    itemSelector: ".grid-item",layoutMode: "fitRows",});

  /* NOTE FILTER ITEMS ON BUTTON CLICK */
  $(".button-group").on("click","button",function () {
    var filterValue = $(this).attr("data-filter");
    $grid.isotope({ filter: filterValue });
  });

  /* NOTE NEW PHONES OWL CAROUSEL */
  $("#new-phones .owl-carousel").owlCarousel({
    loop: true,nav: false,dots: true,});

  /* NOTE LATEST BLOGS ON UPCOMING NEW TECH OWL CAROUSEL */
  $("#blogs .owl-carousel").owlCarousel({
    loop: true,});

  /* NOTE PRODUCT QTY UP AND DOWN */
  let $qty_up = $(".qty .qty-up");
  let $qty_down = $(".qty .qty-down");
  let $deal_price = ("#deal-price");
  //let $input = $(".qty .qty_input");

  /* NOTE CLICK ON QTY UP BUTTON */
  $qty_up.click(function (e) {

    let $input = $(`.qty_input[data-id='${$(this).data("id")}']`);
    let $price = $(`.product_price[data-id='${$(this).data("id")}']`);

    // NOTE CHANGE PRODUCT PRICE USING AJAX CALL
    $.ajax({
      url: "./Template/ajax.php",type: 'post',data:
        { itemid: $(this).data("id") },dataType: 'json',success: function (result) {
          let obj = JSON.parse(result);
          let item_price = obj[0]['item_price'];

          if ($input.val() >= 1 && $input.val() <= 9) {
            $input.val(function (i,oldval) {
              return ++oldval;
            });
          
            // NOTE INCREASE THE PRICE OF THE PRODUCT
            $price.text(parseInt(item_price * $input.val()).toFixed(2));

            // NOTE SET SUBTOTAL PRICE
            let subtotal = parseInt($deal_price.text()) + parseInt(item_price);
            $deal_price.text(subtotal.toFixed(2));
          
          }

        }
    }); // NOTE CLOSING AJAX REQUEST
  });

  /* NOTE CLICK ON QTY DOWN BUTTON */
  $qty_down.click(function (e) {

    let $input = $(`.qty_input[data-id='${$(this).data("id")}']`);
    let $price = $(`.product_price[data-id='${$(this).data("id")}']`);

    // NOTE CHANGE PRODUCT PRICE USING AJAX CALL
    $.ajax({
      url: "./Template/ajax.php",success: function (result) {
          let obj = JSON.parse(result);
          let item_price = obj[0]['item_price'];

          if ($input.val() > 1 && $input.val() <= 10) {
            $input.val(function (i,oldval) {
              return --oldval;
            });
          
            // NOTE INCREASE THE PRICE OF THE PRODUCT
            $price.text(parseInt(item_price * $input.val()).toFixed(2));

            // NOTE SET SUBTOTAL PRICE
            let subtotal = parseInt($deal_price.text()) - parseInt(item_price);
            $deal_price.text(subtotal.toFixed(2));
          
          }

        }
    }); // NOTE CLOSING AJAX REQUEST
  });


});

_cart-template.php将PHP文件扩展到主cart.php 

<!-- NOTE SHOPPING_CART SECTION -->
<?php

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['delete-cart-submit'])) {
        $deletedRecord = $Cart->deleteCart($_POST['item_id']);
    }
}

?>

<section id="cart" class="py-3 mb-5">
    <div class="container-fluid w-75">
        <h5 class="font-roboto font-size-20">Košarica</h5>

        <!-- NOTE SHOPPING CART ITEMS -->
        <div class="row">
            <div class="col-sm-9">
                <?php
                foreach ($product->getData('cart') as $item) :
                    $cart = $product->getProduct($item['item_id']);
                    $subTotal[] = array_map(function ($item) {
                ?>
                        <!-- NOTE CART ITEM -->
                        <div class="row border-top py-3 mt-3">
                            <div class="col-sm-2">
                                <img src="<?php echo $item['item_image'] ?? "./assets/products/1.png" ?>" style="height: 120px;" alt="cart1" class="img-fluid">
                            </div>
                            <div class="col-sm-8">
                                <h5 class="font-roboto font-size-20"><?php echo $item['item_name'] ?? "Unknown"; ?></h5>
                                <small>by <?php echo $item['item_brand'] ?? "Brand"; ?></small>

                                <!-- NOTE PRODUCT RATING -->
                                <div class="d-flex">
                                    <div class="rating text-warning font-size-12">
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="far fa-star"></i></span>
                                    </div>
                                    <a href="#" class="px-2 font-rale font-size-14">20,933 ratings</a>
                                </div>
                                <!-- NOTE PRODUCT RATING -->

                                <!-- NOTE PRODUCT QTY -->
                                <div class="qty d-flex pt-2">
                                    <div class="d-flex font-rale w-25">
                                        <button data-id="<?php echo $item['item_id'] ?? '0'; ?>" class="qty-up border bg-light"><i class="fas fa-angle-up"></i>
                                        </button>
                                        <input type="text" data-id="<?php echo $item['item_id'] ?? '0'; ?>" class="qty_input border px-2 w-50 bg-light text-center" disabled value="1" placeholder="1">
                                        <button data-id="<?php echo $item['item_id'] ?? '0'; ?>" class="qty-down border bg-light"><i class="fas fa-angle-down"></i>
                                        </button>
                                    </div>

                                    <form method="post">
                                        <input type="hidden" value="<?php echo $item['item_id'] ?? 0; ?>" name="item_id">
                                        <button type="submit" name="delete-cart-submit" class="btn font-roboto text-danger px-3 border-right">Izbriši</button>
                                    </form>

                                    <button type="submit" class="btn font-roboto text-danger px-3 border-right">Shrani za poznejši nakup</button>
                                </div>
                                <!-- NOTE PRODUCT QTY -->

                            </div>

                            <!-- NOTE PRODUCT PRICE SPAN -->
                            <div class="col-sm-2 text-right">
                                <div class="font-size-20 text-danger font-roboto">
                                    $<span class="product_price" data-id="<?php echo $item['item_id'] ?? '0'; ?>"><?php echo $item['item_price'] ?? 0; ?></span>
                                </div>
                            </div>
                            <!-- NOTE PRODUCT PRICE SPAN -->

                        </div>
                        <!-- NOTE CART ITEM -->
                <?php
                        return $item['item_price'];
                    },$cart); // NOTE CLOSING ARRAY_MAP FUNCTION
                endforeach;

                ?>
            </div>

            <!-- NOTE SUBTOTAL SECTION -->
            <div class="col-sm-3">
                <div class="sub-total border text-center mt-2">
                    <h6 class="font-size-12 font-rale text-success py-3"><i class="fas fa-check"></i>Vaše naročilo ustreza brezplačni dostavi</h6>
                    <div class="border-top py-4">
                        <h5 class="font-roboto font-size-20">Skupno (<?php echo isset($subTotal) ? count($subTotal) : 0; ?> izdelek/a/i):&nbsp;<span class="text-danger">$<span class="text-danger" id="deal-price"><?php echo isset($subTotal) ? $Cart->getSum($subTotal) : 0; ?></span></span></h5>
                        <button type="submit" class="btn btn-warning mt-3">Nadaljujte z nakupom</button>
                    </div>
                </div>
            </div>
            <!-- NOTE SUBTOTAL SECTION -->

        </div>
        <!-- NOTE SHOPPING CART ITEMS -->
    </div>
</section>
<!-- NOTE SHOPPING_CART SECTION -->

Ajax.php编码JSON，然后在Index.js中调用QTY UP和DOWN按钮！

<?php

// NOTE REQUIRE MYSQLi CONNECTION
require('../database/DBController.php');

// NOTE REQUIRE PRODUCT CLASS
require('../database/Product.php');

// NOTE DBController OBJECT
$db = new DBController();

// NOTE PRODUCT OBJECT
$product = new Product($db);


if(isset($_POST['item_id'])){
    $result = $product->getProduct($_POST['item_id']);
    echo json_encode($result);
}

?>

Cart.php数据库文件，我在其中存储，插入或删除项目

<?php
ob_start();
// NOTE PHP CART CLASS
class Cart
{
    public $db = null;

    public function __construct(DBController $db)
    {
        if(!isset($db->con)) return null;
        $this->db = $db;
    }

    // NOTE INSERT INTO THE CART TABLE
    public function insertIntoCart($parameter = null,$table = "cart"){
        if ($this->db->con != null){
            if($parameter != null){
                // NOTE "INSERT INTO CART TABLE (user_id) values(0)"
                // GET TABLE COLUMNS
                $columns = implode(',',array_keys($parameter));
                
                $values = implode(',array_values($parameter));
                

                // NOTE CREATE SQL QUERY
                $query_string = sprintf("INSERT INTO %s(%s) VALUES(%s)",$table,$columns,$values);
                
                // NOTE EXECUTE QUERY
                $result = $this->db->con->query($query_string);
                return $result;
            }
        }
    }

    // NOTE TO GET USER_ID AND ITEM_ID AND INSERT INTO CART TABLE
    public function addToCart($userid,$itemid){
        if(isset($userid) && isset($itemid)){
           $parameter = array(
              "user_id" => $userid,"item_id" => $itemid
           );

           // NOTE INSERT DATA INTO CART
          $result = $this->insertIntoCart($parameter);
          if($result){
            header("Location:" .$_SERVER['PHP_SELF']);
          } 
        }
    }

    // NOTE DELETE CART ITEM USING CART ITEM ID
    public function deleteCart($item_id = null,$table = 'cart'){
        if($item_id != null){
        $result = $this->db->con->query("DELETE FROM {$table} WHERE item_id={$item_id}");
        if($result){
            header("Location:" .$_SERVER['PHP_SELF']);
        }
        return $result;
        }
    }

    // NOTE CALCULATING SUBTOTAL VALUE OF THE ITEMS IN THE CART (SUB TOTAL) !
    public function getSum($array){
        if(isset($array)){
            $sum = 0;
            foreach ($array as $item) {
                $sum += floatval($item[0]);
            }
            return sprintf('%.2f',$sum);
        }
    }

    // NOTE GET ITEM_ID OF SHOPPING CART LIST
    public function getCartId($cartArray = null,$key = "item_id"){
        if($cartArray != null){
            $cart_id = array_map(function($value) use($key){
               return $value[$key]; 
            },$cartArray);
            return $cart_id;
        }
    }
}
?>

cart.php主要购物车PHP文件

<?php
ob_start();
// NOTE INCLUDE HEADER.PHP
include('header.php');
?>

<?php

// NOTE INCLUDE _CART-TEMPLATE.PHP
include('Template/_cart-template.php');
// NOTE INCLUDE _CART-TEMPLATE.PHP

// NOTE INCLUDE _NEW-PHONES.PHP
include('Template/_new-phones.php');
// NOTE INCLUDE _NEW-PHONES.PHP

?>

<?php
// NOTE INCLUDE FOOTER.PHP
include('footer.php');
?>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot