我希望我已经制定了权利。我是编程方面的新手，正在努力解决问题。
我正在尝试构建自己的电子商务购物车（JS，PHP，HTML）。一切正常（添加项目，显示项目和其他一切除了从购物车中删除订单。）
现在的问题： 我无法从购物车中删除订单。（如果我点击按钮，没有任何反应）但是如果我刷新/重新加载页面。它工作正常。但我想删除它而不重新加载页面。仅使用ajax / js。
我想这可能是因为我在添加新商品时正在重新加载购物车div，是否可能，那个问题在那里？
我不知道你需要多少代码。我会尽力给予最重要的。
<!-- Shopping Cart MODAL -->
<div class="modal fade shoppingCartModal" id="shoppingCartModal" class="modal" style="margin-top:40px;">
<div class="modal-dialog modal-lg" style="background-image: url('/Web/Images/ACP/background.gif');">
<div class="modal-content">
<div class="container">
<?php $shop->shoppingCart(); ?>
</div>
</div>
</div>
</div>
<!-- END OF Shopping Cart MODAL -->
这里的shoppingCart功能：
public function shoppingCart(){
try{
$session_id = session_id();
?>
<table id="cart" class="table table-hover table-condensed">
<thead>
<tr>
<th style="width:50%">Product</th>
<th style="width:10%">Price</th>
<th style="width:8%">Quantity</th>
<th style="width:22%" class="text-center">Subtotal</th>
<th style="width:10%"></th>
</tr>
</thead>
<?php
$stmt = $this->conn->prepare("SELECT * FROM shop_shoppingcart WHERE session_id='$session_id'");
$stmt->execute();
$result = $stmt->fetchAll();
$total = 0;
foreach ($result as $order){
$item_id = $order['item_id'];
$stmt = $this->conn->prepare("SELECT * FROM shop_items WHERE id='$item_id'");
$stmt->execute();
$result = $stmt->fetchAll();
foreach ($result as $item){
?>
<tbody id="cart_item_<?php echo $item['id']; ?>">
<tr>
<td data-th="Product">
<div class="row">
<div class="col-sm-2 hidden-xs"><img src="../Web/<?php echo $order['item_image']; ?>" alt="..." class="img-responsive"/></div>
<div class="col-sm-10">
<h4 class="nomargin"><?php echo $order['item_name']; ?></h4>
<p>Color: <?php echo $order['item_color']; ?></br> Size: <?php echo $order['item_size']; ?></p>
</div>
</div>
</td>
<td data-th="Price">
<?php if($item['saleprice'] > 0.00){
?><span style="color:green"><?php echo $item['saleprice']; ?></span></br><?php
?><s><span style="color:red"><?php echo $item['price']; ?></span></s></br><?php
}else{
?><span style="color:green"><?php echo $item['price']; ?></span></br><?php
} ?></td>
<td data-th="Quantity">
<p style="text-align:center"><?php echo $order['item_quantity']; ?></p>
</td>
<?php $itemTotal = $order['item_price'] * $order['item_quantity']; ?>
<td data-th="Subtotal" class="text-center"><?php echo $itemTotal; ?></td>
<td class="actions" data-th="">
<button id="delete_order_<?php echo $order['id']; ?>" class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></button>
</td>
<?php $total += $itemTotal; ?>
</tr>
</tbody>
<script>
$(function(){
$("#delete_order_<?php echo $order['id']; ?>").click(function(){
$.ajax(
{ url: "Shop.php?delete_item=true?action=select&id=<?php echo $order['id'];?>",
type: "get",
success: function(result){
document.getElementById('cart_item_<?php echo $item['id']; ?>').style.display = 'none';
$('#cart_total').load(document.URL + ' #cart_total');
$('#navigation').load(document.URL + ' #navigation');
}
});
});
});
</script>
<?php } } ?>
<tfoot>
<tr>
<td><a href="#" onclick="continueShopping()" class="btn btn-warning"><i class="fa fa-angle-left"></i> Continue Shopping</a></td>
<td colspan="2" class="hidden-xs"></td>
<td class="hidden-xs text-center"><strong id="cart_total">Total: <?php echo $total; ?></strong></td>
<?php if($total > 0.00){ ?><td><a href="#" class="btn btn-success btn-block" id="cart_checkout">Checkout <i class="fa fa-angle-right"></i></a></td><?php } ?>
</tr>
</tfoot>
</table>
<script>
var shoppingCartModal = document.getElementById('shoppingCartModal');
function continueShopping(){
$(shoppingCartModal).modal('hide');
}
</script>
<?php
}
catch(PDOException $e)
{
echo $e->getMessage();
}
}
按钮不起作用，如果我不刷新页面。
<button id="delete_order_<?php echo $order['id']; ?>" class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></button>
可能这可能是代码，为什么它不会起作用！？ （添加新项目时刷新shoppingCartModal的脚本）
<script>
function AddToCart_<?php echo $item['id'];?>(){
var post_url = "/Web/Pages/Shop/Shop.php";
var request_method = "post";
var form_data = $(Form_AddToCart_<?php echo $item['id'];?>).serialize();
$.ajax({
url : post_url,
type: request_method,
data : form_data
}).done(function(result){
$('#navigation').load(document.URL + ' #navigation');
$('#shoppingCartModal').load(document.URL + ' #shoppingCartModal');
$('.shop_item_<?php echo $item['id'];?>').modal('hide');
document.getElementById('result-box').innerHTML += '<div class="alert alert-success alert-dismissible fade in" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>Item has been added to Your shopping cart!</div>';
});
}
</script>
这一行：
$('#shoppingCartModal').load(document.URL + ' #shoppingCartModal');
答案 0 :(得分：0)
更改删除按钮的代码，如下所示。代码说明如下。 将此脚本放在您的页面上，而不是通过AJAX加载的脚本
<script>
function deleteOrder(o) {
var order_id = $(o).data("order-id");
var item_id = $(o).data("item-id");
$.ajax({
url: "Shop.php?delete_item=true?action=select&id="+item_id+"&order_id="+order_id,
type: "get",
success: function(result){
var item_id = result.item_id; //this should be returned from result
$('#cart_item_'+result.item_id+').style.display = 'none';
$('#cart_total').load(document.URL + ' #cart_total');
$('#navigation').load(document.URL + ' #navigation');
}
});
}
</script>
和按钮的代码
<button id="delete_order_<?php echo $order['id']; ?>" data-order-id="<?php echo $order['id']; ?>" data-item-id="<?php echo $item['id']; ?>" onclick="deleteOrder(this);" class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></button>
<强>解释
data-order-id="<?php echo $order['id']; ?>" data-item-id="<?php echo $item['id']; ?>"将必要的订单ID和商品ID属性添加到您的按钮，以便我们可以在函数deleteOrder中使用它们。 deleteOrder应放在您的网页上，或放在您的一个javascript文件中。只要在页面加载时它就没那么重要了。 onclick="deleteOrder(this);"将在点击时触发该功能，并在点击时将该按钮的属性作为该功能的参数发送。
var order_id = $(o).data("order-id");获取订单ID，我们在按钮上设置，以便我们可以使用它的AJAX请求。
如果省略
var item_id = result.item_id; //this should be returned from result
$('#cart_item_'+result.item_id+').style.display = 'none';
，将调用ajax，但它不会正确隐藏必要的行。要解决此问题，文件Shop.php应以json格式返回必要的ID，例如echo json_encode(array('item_id' => $_GET['id']));