Обновление нескольких элементов (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 вряд ли кто-то станет. Слишком долго и лениво.

Новые блоги и статьи Все статьи Все блоги /
сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	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 законам Кирхгофа и. . .

@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-скрипту

Решение