Ajax成功函数仅更新第一次单击的值 - Ajax success function only updating values for first click

Ajax success function only updating values for first click

下面是一个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>");
              });
            }
            });     
    });
});