ajax按钮监听器未添加到购物车

yftpprvb  于 2021-06-15  发布在  Mysql
关注(0)|答案(0)|浏览(852)

我正在开发一个小型购物车应用程序,用户可以在其中选择不同的汽车并租车/买车。我正在使用 ajax 听我的 button click 事件。当用户单击 Add to Cart 它应该能把这辆车加到我的车上 shopping cart . 中的项目数 cart 也应该改变。现在当我点击 Add to cart 什么都没发生。我仔细检查了我的房间 button listener 但我看不出哪里出错了。我检查了我的房间 chrome console 但我唯一的错误是 not being able to load images from database . 任何想法或帮助将不胜感激。我会把我的代码贴在下面。
jQuery v2.2.0 bootstrap v3.3.6 php v7.1.19 Update :我认为问题是,由于无法从数据库中检索图像,因此它不知道要添加什么。我正在调查此事。 Update2 :我现在可以从数据库检索图像并在屏幕上显示它们。我试着调试我的电脑 ajax 通过添加 alert(data) 其中数据是成功时传递到回调中的内容。当我点击 Add to Cart 上面写着 undefined . Update3 :在进行一些调试之后,我得到了错误 product_id is not defined 在我的 ajax 请求。 Update4 :运行 ajax code 进入 chrome developer ,我得到一个 OK 对于 statusText 还有 200 对于 status . 我不得不把这件事讲完 data 这是发送和它能够工作。但当我点击 Add to Cart 购物车没有更新? index.php ```

 <!-- Two tabs for cart. Nav tabs does this for us  -->
 <ul class = "nav nav-tabs">
 <!-- active defines current page in tab and data toggle is the specific tab
    href will show the Inventory and Cart
  -->
    <li class="active"><a data-toggle="tab" href="#products">Product</a></li>
 <!-- The condition will check the value of the shopping cart varialbe if its set or not
 It will then display whats in our shopping cart -->
    <li class="active">
        <a data-toggle="tab" href="#cart">Cart
            <span class="badge">
        <?php
        if(isset($_SESSION['shopping_cart']))
        {  
        //  This will show how many items in the cart 
          echo count($_SESSION['shopping_cart']);
        }else{
                // If theres nothing in the cart then print 0
                 echo '0';
             }
         ?>
            </span>
        </a>
    </li>
 <!-- } -->
  <!-- ?></span> </a></li> -->
</ul>

<div class="tab-content">
<!-- Display things to add into cart -->
     <div id="products" class="tab-pane fade in active">
     <?php
     // fetch everything from the cars table and store in result variable
     $query = "select * from cars";
     $result = mysqli_query($connect,$query) or die("Invalid query: " . mysql_error());
     // We are fetching everything from the cars table
     while($row = mysqli_fetch_array($result)){

     ?>
     <div class = "col-md-4" style = "margin-top:12px;">

        <div style = "border:1px solid #333; background-color:#f1f1f1;border-radius:5px;
        padding:16px; height:350px;" align="center">

        <!-- we are printing the images from db to the screen -->
        <img src = "/Users/moe/Desktop/Web-FinalProject2/moe/<?php echo $row['carPic']; ?>" class="img-responsive" />

        <!-- name of the car -->
        <h4 class="text-info"><?php echo $row['manufactor'];?></h4>
        <h4 class="text-info"><?php echo $row['carType'];?></h4>

       <!-- price of the car -->
        <h4 class = "text-danger"><?php echo $row['carPrice'];?></h4>

        <!-- The amount of car you want to rent -->
        <!-- id quantity in jquery below
        Here we get the number of cars we want to rent and store into quantity -->
        <input type="text" name="quantity" id="quantity"<?php echo $row[''];?>

         <input type = "hiden" name="hidden_name" id="name<?php echo $row["manufactor"];?>" value="<?php echo $row[""]; ?>" /> 
        <!-- the code above shows the type of the car in the box?
        I think i should change the id="name" to the name of the car. The name attribute
        is in the jquery also -->

        <!-- the next line will store the prices -->
        <input type="hidden" name="hidden_price" id="price <?php echo $row['carPrice'];?>" value="<?php echo $row['carPrice'];?>" />

        <!-- This line will be the button you click to add to the cart -->
        <!-- Each car is unique since the id for it is based on the vinNumber -->
        <!-- The Ajax for the add_to_cart is at the bottom -->
        <input type="button" name="add_to_cart" id="<?php echo $row["vinNum"];?>" class="btn btn-warning form-control add_to_cart" style= "margin-top:5px;" value="Add to Cart" /> 
    </div>
</div>

    <?php

        }
    ?>

</div>

<!-- We wanna display the shopping cart details here -->
 <div id = "cart" class="tab-pane fade">
 <!-- displays order details -->
    <div class="table-responsive" id="order_table">
        <table class="table table-bordered">
            <tr>
                <th width = "40%"> Car Name</th>
                <th width = "10%"> Quantity</th>
                <th width = "20%"> Price</th>
                <th width = "15%"> Total</th>
                <th width = "5%"> Action</th>
            </tr>
            <?php 
            // if the shopping cart has nothing  in there
            if(!empty($_SESSION['shopping_cart'])){
                // Displays total under shopping cart table
                $total = 0;
                // loop through SESSIOn shopping cart array
                foreach($_SESSION['shopping_cart'] as $keys => $values)
                {
            ?>
                    <tr>
                        <!-- Product name -->
                        <td> <?php echo $values['product_name']; ?> </td>
                        <!-- Product Quantity -->
                        <td> <?php echo $values['product_quantity']; ?> </td>
                        <!-- Product Price -->
                        <td align = "right"> <?php echo $values['product_price']; ?> </td>
                        <!-- Total Price of Cars -->
                        <td align = "right"> <?php echo number_format($values['product_quantity'] * $values['product_price']); ?> </td>
                        <!-- Remove Button  -->
                        <td><button name="delete" class="delete" id="<?php echo $values['product_id']; ?>">Remove</td>
                    </tr>

                    <?php
                        // This will show total of whole shopping cart product
                        $total = $total + ($values['product_quantity'] * $values['product_price']);
                }
                    ?>

                <!-- // Now we want to display the total of the shopping cart -->
                <tr>
                    <td colspan ="3" align ="right"> Total</td>
                    <!-- will show total with 2 number decimal point -->
                    <td align= "right">$ <?php echo number_format($total,2); ?></td>
                    <td></td>
                </tr>
            <?php   
            }
            ?>
        </table>
    </div>
 </div>
            },
            // callback will receive data from server and store in data argument
            success:function(data){
                // We have now received the data in JSON format
                $('#order_table').html(data.order_table);
                // Also display total amount in shopping cart
                // It will show in the badge class above
                $('.badge').text(data.cart_item);
                alert("Product has been added to cart");
            },
            error:function(data){
        // Must enter quantity of cars to rent
        alert("Please enter number of Quantity");
            }
        });
    }
 });

});

`action.php`

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题