Как через ajax получить ответ из страницы php?

Question

[vladislav198712]

Всем привет! Сделал небольшую корзину товаров, сам товар получаю из базы данных и вывожу через foreach, возле каждой позиции есть крестик для удаление позиции из корзины. Сделал удаление позиции из бд через ajax. Но как визуально обновить корзину не обновляя страницу не могу придумать.

Answer 1

[ThunderCat]

для аякса предусмотрены колбэк функции, в частности онсаксесс(дата), где в "дата" попадает ответ сервера. То есть код в этой функции будет вызываться в случае успешного выполнения скрипта на сервере (статус 200). Пишете там свое изменение статуса корзины и все, профит.

Comments

[vladislav198712]

Я не так уж силен в ajax, буквально пару часов назад начал знакомство) Как это реализовать? Вот скрипт по удалению из бд с выводом результат без перезагрузки страницы

$(document).ready(function() {
    $('#dellcart').submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: 'dellcart.php',
            data: $(this).serialize(),
            success: function(response)
            {
                var jsonData = JSON.parse(response);
                // user is logged in successfully in the back-end
                // let's redirect
                if (jsonData.success == "1")
                {
                    alert(' Credentials!');
                }
                else
                {
                    alert('Invalid Credentials!');
                }
           }
       });
     });
});

На странице dellcart.php там просто считывает пост данные, и удаляет по ид запись

[ThunderCat]

vladislav198712,

Как это реализовать?

Ну откуда я знаю как? У вас есть структура корзины, какие-то данные в ней, все это известно вам, а не мне. Вы бы определились с конкретной задачей для начала, что нужно сделать с корзиной.

Но как визуально обновить корзину не обновляя страницу не могу придумать.

В чем проблема то? Не умеете работать с элементами DOM?

PS:$('#dellcart').submit(function(e) {#dellcart это одна форма, или их много? Если одна, то как вы определяете что за крестик был нажат? Если не одна - то элемент с таким айди на странице должен быть один. В таком случае вместо айди нужно использовать класс.

[vladislav198712]

ThunderCat, разобрался, просто переделал скрипт вот так

$(document).ready(function() {
    $('#dellcart').submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: 'dellcart.php',
            data: $(this).serialize(),
            success: function(html){
					$("#content").html(html);
				}
       });
     });
});

Форм с dellcart ровно столько сколько и позиций в корзине,

<form id="dellcart" method="post">
  <input type="hidden" name="id_dell" value="'.$book['id'].'">
</form>

на каждом крестике эта форма.

Вот теперь только возникла проблема, на скрине видно три позиции, без перезагрузки удаляется только первая позиция, остальные при удалении перезагружают страницу. После удаления первой позиции, остаются две позиции, и они удаляются только с перезагрузкой

[ThunderCat]

vladislav198712,

Вот теперь только возникла проблема, на скрине видно три позиции, без перезагрузки удаляется только первая позиция, остальные при удалении перезагружают страницу.

Это по тому что надо читать доки, ну или хотя бы ответы

Если (форма) не одна - то элемент с таким айди на странице должен быть один.

Айди - уникальное свойство, на одной странице должен быть только один элемент с таким айди. Замените айди на класс, будет работать.