Ajax成功功能仅更新首次点击的值

Question

好的，我在下面给出了一个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>

我已经检查了我的会话值是否已更新。 但是，该更改未显示在我的桌子上，只有单击即可。

Answer 1

正如评论中指出的那样，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将执行并调用成功函数，该函数将添加已经显示的数据，因为除非重新加载页面，否则它不会更新。 因此，每次单击时，会话都会被更新，并且成功函数也会被调用，但是您的表不会反映所做的更改。

因此，您需要将您的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>");
              });
            }

            });     

    });
});