Как обновить часть страницы?

Question

[alestro]

Есть некий интернет магазин, на нем есть товары, которые можно добавить в корзину. Так вот прикрутил к кнопке добавить ajax и при нажатии данные через post улетают на сервер, где тот записывает их в сессию корзины. Но хочу что бы корзина обновлялась без перезагрузки страницы. Знаю, что тут нужно использовать json. Но как конкретно реализовать - не понимаю. Даже сообразить последовательность действий.

Answer 1

[IceJOKER]

Самый простой способ - это выдавать код корзины по какому-то запросу и просто заменить старую корзину , новой.

$.get('/get-cart.html', function(data){

 $('.my-cart').replaceWith(data); 

});

А вариант с json - после добавления товара получаете список товаров в формате json и в цикле добавляете товары

Comments

[alestro]

В цикле на стороне клиента? То бишь мне нужно отправить в ответ на ajax переменную, в моем случает это массив объектов с товарами и через js их заново отрисовать?

Answer 2

[Александр Вульф]

Если не хотите сильно вникать, то

$('#cart-block').load(location.href + ' #cart-block', function() { $(this).children().eq(0).unwrap() });

Где cart - ID html корзины.

Comments

[alestro]

Код у меня выглядит так:

<div id="cart-block" class="col-xs-5 col-sm-2 shopping-cart-box">
                <a class="cart-link" href="order.html">
                    <span class="title">Ваша корзина</span>
                    <span class="total"><?=$cartTotalProducts?> товара - <?=getPrice($cartTotalPrice)?></span>
                    <span class="notify notify-left"><?=$cartTotalProducts?></span>
                </a>
                <div class="cart-block">
                    <div class="cart-block-content">
                        <h5 class="cart-title">В Вашей корзине: <?=$cartTotalProducts?> товаров</h5>
                        <div class="cart-block-list">
                            <ul>
                            <?php foreach($cartList as $position){
                            if($position->products_discount!=0){$position->products_price-=getDiscount($position->products_price,$position->products_discount);}?>
                            
                                <li class="product-info">
                                    <div class="p-left">
                                        <a href="#" class="remove_link"></a>
                                        <a href="#">
                                        <img class="img-responsive" src="uploads/<?=$position->products_image ?>" alt="p10">
                                        </a>
                                    </div>
                                    <div class="p-right">
                                        <p class="p-name"><?=$position->products_title ?></p>
                                        <p class="p-rice"><?=getPrice($position->products_price,$_SESSION['cart'][$position->products_id])?></p>
                                        <p><?=$_SESSION['cart'][$position->products_id]?></p>
                                    </div>
                                </li>
                                <?php } ?>
                            </ul>
                        </div>
                        <div class="toal-cart">
                            <span>Всего</span>
                            <span class="toal-price pull-right"><?=getPrice($cartTotalPrice)?></span>
                        </div>
                        <div class="cart-buttons">
                            <a href="order.html" class="btn-check-out">Checkout</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>

Насколько я понял мне нужно просто изменить #cart на #cart-block. и больше не посылать ничего, верстка отрисуеется сама?

[Александр Вульф]

alestro: ага

[alestro]

Наверное я все же что-то не понимаю, но разместив Ваш код в футоре и при добавлении id товара в корзину, она не обновляется, но при обновлении в корзину заносится два товара, вместо одного.

[alestro]

Может быть так, что косяк в функции, которая отправляет пост запрос?

[alestro]

$(".add-to-cart").click(function (){

var add = $(this).attr("data-add");
$.post( "category.php",
{
add: add
});

[Александр Вульф]

alestro: мой код просто загружает эту же страницу и вытаскивает оттуда корзину. Затем заменяет старую корзину новой. Про добавление товаров ф-я вообще ничего не знает.

Answer 3

[Владислав]

Скрипт, который отправляет ajax запрос, должен принимать результат от сервера и изменять html. Сервер в свою очередь принимает ajax запрос и возвращает результат например в формате json, на основе которого и меняется html.