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在每次单击按钮时附加值clear 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，并且还注意下面的代码不会开箱即用，因为我没有＆＃39; t测试了它。）

<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>");
              });
            }

            });     

    });
});

Ajax成功函数仅更新第一次单击的值

1 个答案: