我正在开发一个小型购物车应用程序,用户可以在其中选择不同的汽车并租车/买车。我正在使用 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`
暂无答案!
目前还没有任何答案,快来回答吧!