WordPress Ajax пагинация

Вопрос или проблема

Я работаю над темой WordPress (создаю пользовательскую тему) и использую AJAX для пагинации своих пользовательских записей.

Итак, я собираюсь загружать страницы с помощью AJAX, но проблема в том, что когда я нажимаю на следующую страницу, вместо следующей страницы возвращается домашняя страница.

Теперь я собираюсь упростить это с помощью простого примера, если вы можете помочь мне вызвать запрос HELLO в примере ниже, я исправлю весь код, следуя вашему пути.

Вот моя цель HELLO, например (мы должны ее вызвать):

Это мой код в functions.php

add_action("wp_ajax_check_user", "check_user");
add_action("wp_ajax_nopriv_check_user", "check_user");

function check_user() {

    echo 'hello';
    die();
}

И это мой код для вызова “HELLO” на какой-то странице:

$.ajax({
        type: 'POST',
        url: "<?php echo admin_url('admin-ajax.php') ?>",
        data: { 
            'action': 'check_user'
            },
        success : function(data) {
            alert(data); //FOR DEBUG
        }

    });

Итак, я не могу вызвать hello, и вместо этого вижу свою домашнюю страницу.


ОБНОВЛЕНИЕ:
@face

это моя примерная страница, и вы можете увидеть результаты после нажатия на следующую страницу или страницу 2:

вот моя примерная страница

внизу страницы, пожалуйста, попробуйте перейти на следующую страницу или страницу 2. Я сделал результаты в виде окна с сообщением.

Является ли ваша кнопка “next” HTML-элементом “a”? Пожалуйста, добавьте немного больше вашего кода. Как вы вызываете ваш метод $.ajax?

Я прав, что вы вызываете его как-то так:

$("#elementid").on("click", function() {
   $.ajax({....});
}

Если я прав и вы используете элемент “a”, добавьте следующее после метода “click”:

$("#elementid").on("click", function(e) {
    e.preventDefault();
    $.ajax({....});
}

Ответ или решение

Конечно, давайте рассмотрим вашу проблему с AJAX-пагинацией для WordPress и попробуем ее решить. Основная проблема, которую вы описали, связана с тем, что при клике на "следующую страницу" вы видите домашнюю страницу вместо ожидаемого контента. Этот сценарий довольно распространен, особенно при использовании AJAX для загрузки контента на WordPress-сайтах.

Анализ проблемы и её решение

  1. Настройка обработчика AJAX-вызова

    В вашем файле functions.php вы правильно добавили действия для AJAX-запросов. Однако убедитесь, что ваша функция check_user вообще вызывается. Она должна быть зарегистрирована как для авторизованных пользователей, так и для гостей:

    add_action("wp_ajax_check_user", "check_user");
    add_action("wp_ajax_nopriv_check_user", "check_user");
    
    function check_user() {
       echo 'hello';
       wp_die(); // Лучше использовать wp_die() вместо die() для завершения AJAX-запросов.
    }
  2. JavaScript-секция

    Ваш AJAX-запрос, кажется, корректен, но возможна ошибка с определением URL. Убедитесь, что URL админской страницы правильно получает значение. Код может выглядеть так:

    $.ajax({
       type: 'POST',
       url: "<?php echo admin_url('admin-ajax.php'); ?>",
       data: { 
           'action': 'check_user'
       },
       success: function(data) {
           alert(data); // Для отладки, убедитесь, что выводит 'hello'
       },
       error: function(jqXHR, textStatus, errorThrown) {
           console.error('Error:', textStatus, errorThrown); // Обработка ошибок
       }
    });
  3. Работа с событиями кликов

    Если ваш "следующий" элемент реализован как HTML-элемент <a>, он по умолчанию попытается переходить по указанному URL, что может привести к возврату главной страницы. Чтобы этого избежать, заблокируйте стандартное поведение браузера:

    $("#elementid").on("click", function(e) {
       e.preventDefault(); // Блокирует переход по ссылке
       $.ajax({
           type: 'POST',
           url: "<?php echo admin_url('admin-ajax.php'); ?>",
           data: { 
               'action': 'check_user'
           },
           success: function(data) {
               alert(data); // Выводим 'hello'
           },
           error: function(jqXHR, textStatus, errorThrown) {
               console.error('Error:', textStatus, errorThrown);
           }
       });
    });

Дополнительные рекомендации

  • Отладка: Используйте инструменты разработчика вашего браузера для проверки сетевых запросов и консоли. Это поможет вам увидеть, правильно ли устанавливается ваш AJAX-запрос и какие данные отправляются.

  • Безопасность: Всегда проверяйте и валидацию входящих данных в ваш AJAX обрабатыватель от на непреднамеренных и вредоносных запросов с использованием check_ajax_referer(), если это необходимо.

  • Усовершенствование UX: При выполнении AJAX-запросов, заметьте, что пользователи обычно ожидают некоторые визуальные индикаторы загрузки, чтобы удостовериться, что процесс передачи данных происходит.

Итак, следуя этим шагам и рекомендациям, вы сможете наладить работу своей AJAX-пагинации в WordPress и обеспечить корректное выполнение запросов без возврата на домашнюю страницу.

Если у вас возникнут дополнительные вопросы или потребуется помощь с другими аспектами разработки, не стесняйтесь обращаться!

Оцените материал
Добавить комментарий

Капча загружается...