Блог

Главная - Вопросы по программированию - Функция успеха Ajax обновляет значения только для первого клика

Функция успеха Ajax обновляет значения только для первого клика

#javascript #php #jquery #ajax

#javascript #php #jquery #ajax

Вопрос:

Хорошо, у меня есть таблица 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 многомерным массивом сеансов. Он отлично работает для 1-го хода, но не работает для 2-го клика

Мой код 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>

Я проверил, что мои значения сеанса обновлены. Однако изменение не отображается в моей таблице, за исключением первого щелчка.

Комментарии:

1. Любое сообщение об ошибке, с которым вы столкнулись?

2. ошибки нет. он отображает выходные данные для первой функции

3. Измените код цикла PHP на JS, поэтому вам просто нужно использовать response и добавить свои <tr> данные. Потому что PHP работает не так, как вы ожидаете.

4. PHP — это код на стороне сервера, он обрабатывается только перед отображением страницы… И поскольку при каждом повторном запросе ajax вы очищаете таблицу и каждый раз добавляете одно и то же содержимое, я действительно не уверен, что получу вашу логику / ожидаемое поведение. И, к вашему сведению, async false устарел и никогда не должен использоваться, особенно в вашем случае, когда для этого, очевидно, нет причин

5. Хорошо, итак, моя проблема в том, что по моему щелчку я должен отображать изменение значений моего сеанса в таблице без обновления, что мне делать

Ответ №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>");
              });
            }

            });     

    });
});