Обновление содержимого сайта после AJAX-вызова без перезагрузки страницы

Question

Обновление содержимого сайта после AJAX-вызова без перезагрузки страницы

17 мар. 2015 г., 23:53:37

Просмотры: 44.6K

Голосов: 0

Я создал PHP-функцию, которая удаляет продукт с идентификатором, переданным через AJAX-вызов:

function deleteSelectedProduct() 
{
   // Если установлен и не пустой параметр productToDelete
   if ( isset($_POST['productToDelete']) && ! empty($_POST['productToDelete']) ) {
     $postId=$_POST['productToDelete'];
     wp_delete_post($postId);
    }
   die();
}

Мой AJAX-вызов выглядит так:

    $.ajax({
        data: sampleData,
        type: 'POST',
        url: AjaxObject.ss_ajax_url,
        success: function(msg) {
            window.location.reload(true);
        }               
    });

Как видите, я выполняю перезагрузку страницы с помощью window.location.reload(true);, чтобы обновить список продуктов на странице (так как продукт был только что удален).

Есть ли простой способ обновить содержимое страницы без перезагрузки?

Одно из решений, о котором я подумал, заключается в изменении PHP-скрипта так, чтобы он использовал буферизацию вывода:

function deleteSelectedProduct() 
{
   // Если установлен и не пустой параметр productToDelete
   if ( isset($_POST['productToDelete']) && ! empty($_POST['productToDelete']) ) {
     $postId=$_POST['productToDelete'];
     wp_delete_post($postId);
    }

   ob_start();
   include 'some_page.php';
   $response = ob_clean();
   echo $response;
   die();
}

Я не уверен, что это правильный путь. Буду признателен за ваш совет.

luqo33

248

функции ajax

Комментарии

Если у ваших продуктов есть ID, то вы можете их таргетировать. Обычно я создаю ID в формате id="product-[id]", где [id] - это ID записи. Затем вы можете удалить элемент с помощью вашего JS.

kel

18 мар. 2015 г. 00:26:32

Да, есть простое решение с использованием AJAX. Вкратце, вы можете просто заменить содержимое контейнера списка продуктов после удаления через AJAX на актуальное состояние этого списка, без необходимости перезагружать страницу. Или вы можете удалить элемент списка, как предложил @kel.

Nicolai Grossherr

18 мар. 2015 г. 00:55:35

Оба решения выше хороши. $('#product_container').replaceWith(response) - вот как можно реализовать предложение @ialocin.

Steven

18 мар. 2015 г. 02:08:09

@shahar $('#product_container').replaceWith(response) будет работать только в том случае, если ответ содержит обновлённую HTML-разметку для этой части страницы. Скрипт, которому мой AJAX отправляет запрос, не возвращает никакой разметки. Он выполняет только удаление. Мне нужно будет доработать скрипт так, чтобы он возвращал обновлённую разметку, либо использовать метод @kel.

luqo33

21 мар. 2015 г. 16:55:44

Конечно, я просто иллюстрировал, как можно реализовать предложение @ialocin.

Steven

21 мар. 2015 г. 20:33:41

Все ответы на вопрос

Комментарии

Это определенно решит поставленную задачу. Спасибо за данное предложение.

luqo33

21 мар. 2015 г. 16:52:45

DiverseAndRemote.com 513 · Accepted Answer · 2015-03-18T08:27:43Z

Вам нужно использовать ID товара в качестве класса в вашем HTML, а затем вы можете сделать:

$.ajax({
    data: sampleData,
    type: 'POST',
    url: AjaxObject.ss_ajax_url,
    success: function(msg) {
        $( '.product-' + sampleData.productToDelete ).remove();
    }               
});

Если у вас есть счетчики на странице, вам также нужно будет их обновить. Кроме того, если у вас есть пагинация, которая не генерируется через какой-либо JavaScript-фреймворк, то лучше всего просто перезагружать страницу по мере необходимости.

DiverseAndRemote.com

513

18 мар. 2015 г. 08:27:43