我正在开发一个小型购物车应用程序，用户可以在其中选择不同的汽车并进行租赁/购买。我正在使用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的{{1}}和{{1} {1}}。我不得不注释掉发送的200，它可以正常工作。但是，当我单击status时，购物车没有更新吗？
data
Add to Cart index.php
<?php
session_start();
// Connect to database
$connect = mysqli_connect("127.0.0.1", "root","", "rentalCar");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<br />
<!-- Car Inventory will display across the screen -->
<div class = "container" style="width:1000px;">
<h2 align="center"> Car Inventory</h2></br>
<!-- 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>
</div>
</div>
</body>
</html>
jquery
<script>
// This is the code to add a product to the cart
$(document).ready(function(data){
// When we click add to the cart button this code will execute
$('.add_to_cart').click(function(){
// we will use the vinNum as the id
var product_id = $(this).attr("vinNum");
// store the name of the car
var product_name = $('#name' + product_id).val();
// we get the price of the car and store it
var product_price = $('#price' + product_id).val();
// we fetch the quanity of cars to rent and store into the variable
var product_quantity = $('#quantity' + product_id).val();
// here we add the product into the cart
var action = "Add";
// checks if value of product quantity is greater than 0
if(product_quantity > 0){
/* If the value is greater then we redirect
to the action.php page and its a POST method
We have the data type which is JSON and then we
say which data we want to send
*/
$.ajax({
url: "action.php",
method:"POST",
dataType:"json",
data:{
// we are sending this data to the server
product_id:product_id,
product_name:product_name,
product_price:product_price,
product_quantity:product_quantity,
action:action
},
// 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");
}
});
}
});
});
</script>