下面是一个html表格:
<table class="table">
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th colspan="2">Total</th>
</tr>
</thead>
<tbody id="cart_table">
...
</tbody>
<tfoot>
<tr>
<th colspan="2">Total</th>
<th colspan="2">$446.00</th>
</tr>
</tfoot>
</table>
我使用ajax在每次单击按钮时添加值清除tbody,并用多维会话数组重新填充tbody。它工作良好的第一个回合,但不工作的第二次点击
我的jquery代码如下
<script>
$(document).ready(function(){
$('.addToCart').on('click',function(e){
$("#cart_table").empty();
var price = $(this).attr('data-price');
var item = $(this).attr('data-itemname');
e.preventDefault();
$.ajax({
method : "POST",
async: false,
url: "./php/addToCart.php",
dataType : "json",
data : {item:item,price:price},
success : function(response){
$("#cart_table").empty();
<?php
$i = 0;
foreach ($_SESSION["cart_array"] as $each_item):
$item = $each_item['item'];
$price=$each_item['price'];
$quantity=$each_item['quantity'];
?>
$('#cart_table').append("<tr><td><?php echo $item; ?></td><td><?php echo $quantity; ?></td><td><?php echo $price; ?></td><td><a href='#'><i class='fa fa-trash-o'></i></a></td></tr>");
<?php
endforeach;
?>
}
});
});
});
</script>
我已经检查了我的会话值已更新。但是,除了第一次单击之外,更改不会显示在我的表上。
正如在评论中指出的PHP是服务器端语言,因为它反映的变化,你的页面需要重新加载,但因为你使用ajax页面不会重新加载(或者更确切地说,我们不需要它重新加载)。
它第一次工作是因为第一次加载页面时,当前数据已经存在于JavaScript函数中:
就在这里:
$('#cart_table').append(<?php echo "<tr><td>".$item."</td><td>".$quantity."</td><td>".$price."</td><td><a href='#'><i class='fa fa-trash-o'></i></a></td></tr>";?>);
这里发生的事情是,当您第一次单击时,ajax将执行并调用success函数,该函数将添加已经呈现的数据,因为除非页面重新加载,否则它不会更新。所以每次你点击,你的会话将被更新,成功函数也被调用,但你的表不会反映这些变化。
所以,你需要改变你的PHP代码JavaScript,这里的基本思路是做什么,(在这里我已经假设你的响应是JSON,并注意到下面的代码不会开箱即用,因为我没有测试它。)
<script>
$(document).ready(function(){
$('.addToCart').on('click',function(e){
$("#cart_table").empty();
var price = $(this).attr('data-price');
var item = $(this).attr('data-itemname');
e.preventDefault();
$.ajax({
method : "POST",
async: false,
url: "./php/addToCart.php",
dataType : "json",
data : {item:item,price:price},
success : function(response){
$("#cart_table").empty();
//New JavaScript code, make appropriate changes.
jQuery.each(response, function(key, row) {
$('#cart_table').append("<tr><td>" + row.item + "</td><td>" + row.quantity + "</td><td>" + row.price + "</td><td><a href='#'><i class='fa fa-trash-o'></i></a></td></tr>");
});
}
});
});
});