Как использовать JSON с AJAX?

Содержание

Вопрос или проблема
Ответ или решение
1. Проверьте правильность функции обратного вызова
2. Не забывайте о wp_die()
3. Проверьте локализацию скрипта
4. Использование ajaxurl
5. Анализ ваших AJAX-запросов
Заключение

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

Я определил функцию обратного вызова PHP для обработки связи между серверной и клиентской сторонами:

function json_render_modal_body() {

    check_ajax_referer( THEME_PREFIX . '-modals', 'nonce' );

    $response = array( 'text' => 'no' );
    $modal_id = null;

    if ( isset( $_GET['modal_id'] ) && ! $modal_id = filter_var( $_GET['modal_id'], FILTER_SANITIZE_STRING ) ) {
        wp_send_json_error( $response );
    }

    if ( ! $form = render_form( $modal_id ) ) {
        wp_send_json_error( $response );
    }

    $response['text'] = 'yes';

    wp_send_json_success( $response );

}

Я сообщил WordPress об этой функции для обработки процесса связи:

add_action( 'wp_ajax_json_render_modal_body', __NAMESPACE__ . '\json_render_modal_body' );
add_action( 'wp_ajax_nopriv_json_render_modal_body', __NAMESPACE__ . '\json_render_modal_body' );

Я зарегистрировал/включил/локализовал свой JS-скрипт для обработки AJAX-запроса.

Вот что я локализовал:

wp_localize_script(
    THEME_PREFIX . '-modals',
    'mbe_theme_modal',
    array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
        'nonce' => wp_create_nonce( THEME_PREFIX . '-modals' )
    )
);

Вот как выглядит мой JS-скрипт:

var modal_id = jQuery( e.relatedTarget ).attr( "data-target" ).replace( "#", "" );

jQuery.get(
    mbe_theme_modal.ajax_url,
    {
        action: "json_render_modal_body",
        modal_id: modal_id,
        nonce: mbe_theme_modal.nonce
    },
    function ( data ) {

        console.log( data );

    },
    'json'
);

Есть идеи, почему я продолжаю получать 0 в своем AJAX-ответе?

Я также пробовал удалить информацию о nonce из своего кода и получить доступ к прямому URL (domain.com/wp-admin/admin-ajax.php?action=json_render_modal_body&modal_id=some-modal-id), однако я по-прежнему получаю 0.

Я даже пытался сделать PHP-функцию максимально простой с только простым текстовым ответом и по-прежнему получаю 0.

Обычно вы можете использовать глобальную переменную ajaxurl вместо любого пути с использованием admin-ajax.php.

Важно отметить, что PHP-функция должна echo ответ перед вызовом wp_die(). Поскольку вы не вызвали wp_die(), AJAX, вероятно, ждет большего от PHP.

Надеюсь, это поможет.

П.С. Что делает эта строка 'json', где должна быть функция fail() AJAX?

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

Для решения вашей проблемы с получением ответа 0 в AJAX-запросах, давайте разберем несколько ключевых моментов, которые могут оказать влияние на корректное функционирование вашего кода.

1. Проверьте правильность функции обратного вызова

Ваше определение функции json_render_modal_body выглядит правильно, однако убедитесь, что в ней всегда происходит вызов wp_die() после отправки ответа. Это необходимо, чтобы завершить выполнение скрипта корректно:

function json_render_modal_body() {
    check_ajax_referer( THEME_PREFIX . '-modals', 'nonce' );

    $response = array('text' => 'no');
    $modal_id = null;

    if (isset($_GET['modal_id']) && ! $modal_id = filter_var($_GET['modal_id'], FILTER_SANITIZE_STRING)) {
        wp_send_json_error($response);
        wp_die(); // Завершаем выполнение
    }

    if (! $form = render_form($modal_id)) {
        wp_send_json_error($response);
        wp_die(); // Завершаем выполнение
    }

    $response['text'] = 'yes';
    wp_send_json_success($response);
    wp_die(); // Завершаем выполнение
}

2. Не забывайте о `wp_die()`

Как уже упоминалось, важно завершить исполнение скрипта, вызвав wp_die(), после отправки ответа. Если этого не сделать, сервер будет ожидать дальнейшие данные, что может привести к получению 0 в ответ.

3. Проверьте локализацию скрипта

Убедитесь, что wp_localize_script используется корректно и скрипт действительно получает необходимые параметры. Если вы не видите правильные значения в консоли, возможно, проблема в пути к admin-ajax.php или в создании nonce.

4. Использование `ajaxurl`

В WordPress имеется глобальная переменная ajaxurl, которую можно использовать для указания URL для AJAX-запросов, вместо написания своего. Вы можете попробовать использовать ее следующим образом:

wp_localize_script(
    THEME_PREFIX . '-modals',
    'mbe_theme_modal',
    array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce(THEME_PREFIX . '-modals')
    )
);

5. Анализ ваших AJAX-запросов

Ваш JavaScript код выглядит нормально, но убедитесь, что вы проверяете правильные данные в консоли браузера:

var modal_id = jQuery(e.relatedTarget).attr("data-target").replace("#", "");

jQuery.get(
    mbe_theme_modal.ajax_url,
    {
        action: "json_render_modal_body",
        modal_id: modal_id,
        nonce: mbe_theme_modal.nonce
    },
    function(data) {
        console.log(data);
    },
    'json'
);

Также важно помнить, что 0 может означать, что AJAX-запрос завершился неудачно, например, из-за неверных данных. Попробуйте отладить ваш AJAX-запрос, добавив обработку ошибок:

jQuery.get(
    mbe_theme_modal.ajax_url,
    {
        action: "json_render_modal_body",
        modal_id: modal_id,
        nonce: mbe_theme_modal.nonce
    },
    function(data) {
        console.log(data);
    },
    'json'
).fail(function(jqXHR, textStatus, errorThrown) {
    console.error("AJAX request failed: " + textStatus + ", " + errorThrown);
});

Заключение

Проверив все вышеперечисленные моменты и добавив wp_die(), вы, скорее всего, сможете решить проблему с получением ответа 0 от вашего AJAX-запроса. Убедитесь, что обрабатываете возможные ошибки и тестируете запросы в консоли для наиболее полного понимания происходящего.