Обновление нескольких элементов (div-ов) сайта по результату ajax запроса к php-скрипту

@ZikWall · Регистрация: 21.09.2015

Студворк — интернет-сервис помощи студентам

Добрый день, такой вопрос: нужно обновлять несколько div-ов сайта одним асинхронным запросов к php - скрипту.
Есть код:

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script>
    // добавление
    $(document).ready(function(){
        $(".add-to-cart").click(function () {
            var id = $(this).attr("data-id");
            $.post("/cart/add/"+id, {}, function (data) {
                $("#cart-count").html(data); // - тут обновляется счетчик, сколько количества в корзине товаров
            });
            return false;
        });
        // удаление
        $( "div" ).on( "click", ".delete-from-cart", function() {
            var id = $(this).attr("data-id");
            $.post("/cart/delete/"+id, {}, function (data) {
                $("#cart-basket").html(data); // - тут должна обновляться корзина
                // - и еще тут должен обновляться счетчик
            });
            return false;
        });
        // полная очистка
        $( "div" ).on( "click", ".clear-cart", function() {
            $.post("/cart/clear", {}, function (data) {
                $("#cart-basket").html(data); // - тут должна обновляться корзина
                // - и еще тут должен обновляться счетчик
            });
            return false;
        });
    });
</script>

Так вот вопрос, как это реализовать? Чтобы при удалении и счетчик обновлялся и перерасчет (чтобы по циклу заново вывести товары из массива СЕССИИ) корзины был...
Php скрипт обработки, экшен

Кликните здесь для просмотра всего текста

PHP
1
2
3
4
5
public function actionAddAjax($id){
        $this->model = new Cart();
        echo $this->model->addProduct($id);
        return true;
    }

функция добавления

Кликните здесь для просмотра всего текста

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
public static function addProduct($id)
    {
        $id = intval($id);
        $productsInCart = array();
        if (isset($_SESSION['products'])) {
            $productsInCart = $_SESSION['products'];
        }
 
        if (array_key_exists($id, $productsInCart)) {
            $productsInCart[$id] ++;
        } else {
            $productsInCart[$id] = 1;
        }
        $_SESSION['products'] = $productsInCart;
        return self::countItems(); # возвращает количество товаров, для счетчика

и наконец самое проблемное - это как отобразить корзину...

Кликните здесь для просмотра всего текста

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public function GetCart(){
        $productsInCart = array();
        $productsInCart = self::getProducts(); // возвращаем товары из текущего массива СЕССИИ, иначе ложь
        if ($productsInCart) {
            $productsIds = array_keys($productsInCart);
            $products    = Shop::gi()->getProdustsByIds($productsIds); // получаем все товары по идентификатору, которые есть в СЕССИИ
 
// вот тут дальше не понятно, как все это реализовать, чтобы ответом этого скрипта можно было обновлять div-ы разных частей
            return array('productInCart' => $productsInCart,
                         'productIds'    => $productsIds,
                         'products'      => $products,
                         'totalPrice'    => self::getTotalPrice($products),
            );
        } else {
            return false;
        }
    }

Как вернуть результат? Напомню нужно обновить таблицу корзины и счетчик(кол-во товаров в корзине). МБ тут можно как-то JSON-ом обойтись. если да как это реализовать?

вот вывод:

Кликните здесь для просмотра всего текста

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?php if ($this->data['cart']['productInCart']) : ?>
    <div class="block" id="cart-basket">
        <div class="block-header">
            <h3 class="block-title"> Products</h3>
        </div>
        <div class="block-content" >
            <table class="table table-borderless table-vcenter">
                <tbody>
                <?php foreach ($this->data['cart']['products'] as $row): ?>
                    <tr>
                        <td style="max-width: 55px;" class="text-center">
                            <a class="text-danger delete-from-cart" href="#" data-id="<?=$row['id']?>"><i class="fa fa-times"></i></a>
                        </td>
                        <td style="width: 55px;">
                            <img class="img-responsive" src="http://demo.pixelcave.com/oneui/assets/img/various/ecom_product1.png" alt="" kasperskylab_antibanner="on">
                        </td>
                        <td>
                            <a class="h5" href="/commerce/shop/item/<?=$row['category_id']?>/<?=$row['id']?>"><?=$row['name']?></a>
                            <div class="font-s12 text-muted hidden-xs"><?=$row['brand']?> / <?=$row['category_name']?></div>
                        </td>
                        <td class="text-right">
                            <div class="font-w600 text-success">$<?=$row['price']?></div>
                        </td>
                        <td class="text-right">
                            <div class="font-w600 text-success"><?=$this->data['cart']['productInCart'][$row['id']]?></div>
                        </td>
                    </tr>
                <? endforeach;?>
                <tr class="success">
                    <td class="text-right" colspan="4">
                        <span class="h4 font-w600">Total</span>
                    </td>
                    <td class="text-right">
                        <div class="h4 font-w600 text-success">$<?=$this->data['cart']['totalPrice']?></div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

З.Ы при добавлении в корзину, вот эта часть кода

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
<script>
    // добавление
    $(document).ready(function(){
        $(".add-to-cart").click(function () {
            var id = $(this).attr("data-id");
            $.post("/cart/add/"+id, {}, function (data) {
                $("#cart-count").html(data); // - тут обновляется счетчик, сколько количества в корзине товаров
            });
            return false;
        });

прекрасно работает и остальные работают, но нужно обновить РАЗНЫЕ элементы сайта и заново пересчитать корзину в цикле...

@Balanaar · 08.11.2016, 13:41

Сообщение от ZikWall

Как вернуть результат?

Ответ можно вернуть с помощью обыкновенного оператора echo.

PHP
1
2
3
4
5
6
// вот тут дальше не понятно, как все это реализовать, чтобы ответом этого скрипта можно было обновлять div-ы разных частей
            return array('productInCart' => $productsInCart,
                         'productIds'    => $productsIds,
                         'products'      => $products,
                         'totalPrice'    => self::getTotalPrice($products),
            );

Вот этот ваш массив преобразуйте в формат JSON на стороне PHP, и выводите с помощью echo. На стороне клиента аяксом обращайтесь к этой функции, принимайте JSON, разворачивайте в объект и работайте дальше

@ZikWall · 08.11.2016, 14:54 **[ТС]**

Balanaar, а как на стороне клиента обратиться к массиву JSON, который вывели через echo? Просто не так силён в JS, AJAX...

@Balanaar · 08.11.2016, 15:07

Краем глаза увидел у вас такую конструкцию:

JavaScript
1
2
3
$.post("/cart/add/"+id, {}, function (data) {
         $("#cart-count").html(data); // - тут обновляется счетчик, сколько количества в корзине товаров
     });

В данном случае вы выполняете ajax-запрос методом POST на '/cart/add/'+id. Результат запроса будет содержаться в переменной data внутри функции. Смотрите jQuery-функции $.ajax, $.get, $.post ($.ajax вполне хватит)

@ZikWall · 08.11.2016, 15:38 **[ТС]**

Сообщение от Balanaar

В данном случае вы выполняете ajax-запрос методом POST на '/cart/add/'+id. Результат запроса будет содержаться в переменной data внутри функции.

Да, это понятно, именно по data я и обновлял div, но так я мог обновить только один определенный, например корзину с товарами, а счетчик так и оставался не обновленным, но если обновить страницу, то значение в счетчике конечно же поменяется.

Сообщение от Balanaar

Смотрите jQuery-функции $.ajax, $.get, $.post ($.ajax вполне хватит)

Не совсем понял вашу мысль, я не очень разбираюсь в ajax, но почитаю на эту тему
Вот ниже код, там комментариями показано, что должно обновиться

JavaScript
1
2
3
4
5
6
7
8
$( "div" ).on( "click", ".delete-from-cart", function() {
            var id = $(this).attr("data-id");
            $.post("/cart/delete/"+id, {}, function (data) {
                $("#cart-basket").html(data); // - тут должна обновляться корзина
                КАКОЙ-ТО НЕВЕДОМЫЙ КОД  // - и еще тут должен обновляться счетчик
            });
            return false;
        });

Вот как я должен обновить div $("#cart-basket").html(data); и div $("#cart-count").html(data); одновременно и заново отрендерить корзину со счетчиком? Чтобы отрендерить я в конце этого кода:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public function GetCart(){
        $productsInCart = array();
        $productsInCart = self::getProducts(); // возвращаем товары из текущего массива СЕССИИ, иначе ложь
        if ($productsInCart) {
            $productsIds = array_keys($productsInCart);
            $products    = Shop::gi()->getProdustsByIds($productsIds); // получаем все товары по идентификатору, которые есть в СЕССИИ
 
// вот тут дальше не понятно, как все это реализовать, чтобы ответом этого скрипта можно было обновлять div-ы разных частей
            return array('productInCart' => $productsInCart,
                         'productIds'    => $productsIds,
                         'products'      => $products,
                         'totalPrice'    => self::getTotalPrice($products),
            );
        } else {
            return false;
        }
    }

Приписывал еще require_once('Директория к корзине/Файл корзины.php'), но это была лажа, поскольку если я хотел обновить счетчик, то вместо div-а счетчика вырисовывалась корзина, не красивое зрелище...Теперь корзина подключается во View-шке, которой и передаются параметры - массив с данными из функции GetCart();

Я не полностью представил свой код, прошу прощения. Еще экшены отрисовки корзины и экшены удаления (в контроллере Корзины)

@Balanaar · 08.11.2016, 15:46

Не очень понятно, что вы хотите обновить и как.
JS может придать документу интерактивность. Он может оперировать с DOM в пределах одной страницы в браузере клиента. Если вы обновите страницу, то браузер отправит запрос к серверу и загрузит оттуда данные по новой. Если вы хотите сохранять пользовательский выбор между обновлениями страницы/переходами - вам надо либо сохранять информацию на сервере с помощью сессии, либо хранить информацию на клиенте с помощью cookie

Добавлено через 1 минуту
И еще не понятно, что такое "должна обновляться корзина". Картинка должна меняться у нее? Или счетчик товаров? Или другое?

@ZikWall · 08.11.2016, 19:29 **[ТС]**

Сообщение от Balanaar

Не очень понятно, что вы хотите обновить и как.

Согласен, все вышло как-то запутано...Постараюсь все с нуля с самого далека и без серверной части php.
Хочу сделать динамичную корзину и вообще интернет-магазин без перезагрузки страниц - это просто, чтобы тренироваться, не коммерческий продукт.
Для этого мне понадобилось три функции: добавление, удаление и очистка корзины, сразу скажу, что все они работают.
В общем на сайте существует только два элемента для обновления - это счетчик и корзина (см. Прикрепленное изображение 1 и 2), в счетчике видно, что количество товаров в не зависимости от типа и всего прочего - 19 штук (это может быть товар одного вида или нескольких не важно).
На втором изображении - это корзина там отображены товар, ее цена и количество, а так же подсчитывается общая сумма и еще крестики для удаления.
Вот идентификаторы:
$("#cart-count") - это счетчик (div) (первое изображение)
$("#cart-basket") - это корзина (другой div) (второе изображение)

Пути к запросам:
site.ru/cart/add/{id} - добавление по id
site.ru/cart/delete/{id} - удаление по id
site.ru/cart/clear

Добавление возвращает только один результат - это количество товаров в корзине, это я смог проделать вот таким образом:

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
$(".add-to-cart").click(function () {
            var id = $(this).attr("data-id");
            $.post("/cart/add/"+id, {}, function (data) {
                $("#cart-count").html(data); // - тут обновляется счетчик, сколько количества в корзине товаров
            });
            return false;
        });

Т.к удаление товаров из корзины производится непосредственно на странице самой корзины, то тут нужно обновлять 2 элемента - это корзина (#cart-basket) и счетчик (#cart-count)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
$( "div" ).on( "click", ".delete-from-cart", function() {
            var id = $(this).attr("data-id");
            $.post("/cart/delete/"+id, {}, function (data) {
 
проблемная часть кода
------------------------------------------------------------------------------------------------------
                $("#cart-basket").html(data);  // - тут должна обновляться корзина
                $("#cart-count").html(data);    // - и еще тут должен обновляться счетчик
------------------------------------------------------------------------------------------------------
 
            });
            return false;
        });

Без php видимо не обойтись, скажем вот серверная обработка возвращает массив, товаров, общей суммы и количества товаров в корзине. Первые два необходим для корзины, а последний для счетчика:

Кликните здесь для просмотра всего текста

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
public function GetCart(){
        $productsInCart = array();
        $productsInCart = self::getProducts();
        if ($productsInCart) {
            $productsIds = array_keys($productsInCart);
            $products    = Shop::gi()->getProdustsByIds($productsIds);
            return array('productInCart' => $productsInCart,
                         'products'      => $products,
                         'totalPrice'    => self::getTotalPrice($products),
                         'count'         => self::countItems(),
            );
        } else {
            return false;
        }
    }

Вот, что болит:

JavaScript
1
2
                $("#cart-basket").html(data);  // - тут должна обновляться корзина
                $("#cart-count").html(data);    // - и еще тут должен обновляться счетчик

Как обновить два элемента, имея такой массив данных? Или если есть более "гуманное" решение, пожалуйста, поделитесь как пример хотя бы

@Balanaar · 09.11.2016, 10:56

Очень много буковок. Еле заставил себя прочесть и вникнуть. И то на следующий день только.
Честно говоря, я так до сих пор и не понял, в чем трудность-то? Объявите некую переменную, которая будет содержать в себе информацию об объектах, добавленных в корзину. Предположим это будет объект, имеющий следующую структуру:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
var goods = {
   <ID1>: {
                name: 'Ноутбук HP',
                price: 305,
                amount: 6
          },
   <ID2>: {
                name: 'Samsung Galaxy',
                price: 780,
                amount: 3
          },
   ...
}

где <ID1>, <ID2> - идентификаторы товаров (из БД). Структура не обязательно должна быть такой. Продумайте ее сами согласно вашим задачам. Далее при добавлении товара в корзину вы добавляете новый объект в переменную goods, либо увеличиваете goods[id].amount на 1, если такой товар уже добавлен. Параллельно увеличиваете счетчик рядом с корзиной. Также сохраняйте изменения в cookie, чтобы при обновлении страницы или переходе на другую, информация о выбранных товарах оставалась.

@ZikWall · 09.11.2016, 11:04 **[ТС]**

Balanaar,

Очень много буковок. Еле заставил себя прочесть и вникнуть. И то на следующий день только.

старался

))
Т.е вы предложили вариант, в которой вместо $_SESSION в PHP использовать массив JS для хранения товаров?

@Balanaar · 09.11.2016, 11:15

Сообщение от ZikWall

Хочу сделать динамичную корзину и вообще интернет-магазин без перезагрузки страниц

Вам не сделать этого, используя $_SESSION. Можно конечно оперировать ей с помощью ajax-запросов (добавлять туда данные аяксом, получать оттуда данные аяксом) только смысл?

@ZikWall · 09.11.2016, 15:47 **[ТС]**

Balanaar, почему же не сделаать , данные как раз таки де Аяксом и добавляются и так же возвращаются или я что-то не до понимаю в этом... Возвращаются после пост запроса ответом, этот ответ и обновляет данные. Все динамичное, но я могу этим ответом обновлять только одну часть либо корзину либо счётчик, до сих пор не понял как обновить оба сразу одним ответом

@Balanaar · 09.11.2016, 16:01

У вас явно проблемы с пониманием клиент-серверного взаимодействия. И дело тут не в знании языков.

Сообщение от ZikWall

этот ответ и обновляет данные

Ответ ничего не обновляет. Информация обновляется вашим программным кодом на основании ответа. Формат ответа тоже вам подвластен. Вы можете придумать что угодно - например заставить сервер после обработки запроса ответить клиенту строкой "Обнови счетчик товаров рядом с корзиной бистро!11!!", клиент получает эту строку, парсит ее, понимает, что ему нужно сделать и делает. Только вам клиенту надо объяснить, как именно расшифровывать этот ответ.
Если отойти от абстрактных примеров, то вы можете отправить post-запрос на удаление товара:

JavaScript
1
2
3
$.post("/cart/delete/"+id, {}, function (data) {
   ...
}

А в ответе вернуть, например, полный перечень оставшихся товаров после удаления. Дальше вы берете этот перечень товаров (например в формате JSON) и на основании этого ответа обновляете данные на странице.
Но еще раз говорю: применительно к вашему случаю эти ajax-запросы - бессмысленная трата серверных ресурсов и клиентского времени. Делайте все на cookie на стороне клиента.

@ZikWall · 09.11.2016, 18:33 **[ТС]**

Сообщение от Balanaar

Ответ ничего не обновляет. Информация обновляется вашим программным кодом на основании ответа.

Да, вы правы, просто не точно выразился - возвращается ответ от скрипта и с этими данными я уже должен выполнять манипуляции...

Сообщение от Balanaar

А в ответе вернуть, например, полный перечень оставшихся товаров после удаления. Дальше вы берете этот перечень товаров (например в формате JSON) и на основании этого ответа обновляете данные на странице.

Вот! В точку, именно это я и хотел пояснить, если скажем php - скрипт отдает ответ вот таким массивом: товары, общая сумма и количество

PHP
1
2
3
4
5
6
return array('productInCart' => $productsInCart,
                         'productIds'    => $productsIds,
                         'products'      => $products,
                         'totalPrice'    => self::getTotalPrice($products),
                         'count'         => self:getCountItems();
            );

Как мне их использовать уже на стороне клиента?
А вообще, да лучше уж пойду вот этим путем

Сообщение от Balanaar

Делайте все на cookie на стороне клиента.

а то уже голова болит)

@Balanaar · 09.11.2016, 20:22

Сообщение от ZikWall

Как мне их использовать уже на стороне клиента?

Что... вам... не понятно?
Если взять наш пример (в ответе после удаления приходит полный перечень оставшихся в корзине продуктов), то создайте переменную, в которую вы поместите ответ сервера. Это будет строковая переменная (вероятнее всего в формате JSON - зависит от серверного скрипта). Примените к ней JSON.parse, которая преобразует строку в javascript-объект, пройдитесь по этому объекту в цикле, сформируйте новый html-код с товарами для корзины, посчитайте количество товаров в этом объекте, удалите старый html-код корзины, вставьте новый уже сформированный, измените счетчик корзины на количество элементов объекта. Всё.
Еще раз подчеркну, что такая схема - бредятина полная, но сделайте хотя бы так, чтобы осознать хотя бы примерно как это делается. Расписывать целиком как это нужно делать через cookie вряд ли кто-то станет. Слишком долго и лениво.

Новые блоги и статьи Все статьи Все блоги /
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .	Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .
Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .

@ZikWall 0 / 0 / 3 Регистрация: 21.09.2015 Сообщений: 135
	08.11.2016, 14:54 [ТС]
	Balanaar, а как на стороне клиента обратиться к массиву JSON, который вывели через echo? Просто не так силён в JS, AJAX... 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	08.11.2016, 15:46
	Не очень понятно, что вы хотите обновить и как. JS может придать документу интерактивность. Он может оперировать с DOM в пределах одной страницы в браузере клиента. Если вы обновите страницу, то браузер отправит запрос к серверу и загрузит оттуда данные по новой. Если вы хотите сохранять пользовательский выбор между обновлениями страницы/переходами - вам надо либо сохранять информацию на сервере с помощью сессии, либо хранить информацию на клиенте с помощью cookie Добавлено через 1 минуту И еще не понятно, что такое "должна обновляться корзина". Картинка должна меняться у нее? Или счетчик товаров? Или другое? 0

@ZikWall 0 / 0 / 3 Регистрация: 21.09.2015 Сообщений: 135
	09.11.2016, 15:47 [ТС]
	Balanaar, почему же не сделаать , данные как раз таки де Аяксом и добавляются и так же возвращаются или я что-то не до понимаю в этом... Возвращаются после пост запроса ответом, этот ответ и обновляет данные. Все динамичное, но я могу этим ответом обновлять только одну часть либо корзину либо счётчик, до сих пор не понял как обновить оба сразу одним ответом 0

Обновление нескольких элементов (div-ов) сайта по результату ajax запроса к php-скрипту

Решение