jQuery и AJAX получение данных из PHP в WordPress. admin-ajax.php возвращает 400.

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

Я работаю над графом arbor.js. Я хочу отправить идентификатор участника, чтобы запросить его из PHP, вернуть JSON дерева участника опять в скрипт jQuery, а затем напечатать дерево.
вот HTML форма

<form action="" method="post" id="blm_get_tree_view_meta_ajax_form" >           
    <?php echo $dropdown_html; ?>
    <input type="hidden" name="action" value="blm_member_tree_response">
    <input type="hidden" name="blm_mem_tree_meta_nonce" value="<?php echo $blm_add_meta_nonce ?>" />
    <input id="<?php echo $this->plugin_name; ?>-treeview_mem_id"  type="hidden" name="<?php echo "blm"; ?>[memid]" value="">
    <p class="submit"><input type="button" name="get_tree" id="get_tree" class="button button-primary" value="GET TREE"></p>
</form>

И это jQuery скрипт

<script>

jQuery( document ).ready( function( $ ) {
"use strict";
    
    $('#get_tree').on('click',function(){
        var user_id = $('#binary-level-marketting-treeview_mem_id').val();

        //console.log(user_id);
        $.ajax({
            type:'POST',
            url: params.ajaxurl,
            data:{action:'blm_member_tree_response', user_id:user_id},
            success:function(data){
                if(data.status == 'ok') {
                    console.log(data.nodes);
                    (function ($) {
                    var Renderer = function (canvas) {
                                var canvas = $(canvas).get(0);
                                var ctx = canvas.getContext("2d");
                                var particleSystem;
                                var that = {
                                    // здесь идет рендеринг arbor.js.
                                    
                                    //....
                                    //...
                                }         
                                    // и рендерер
                                    $(document).ready(function () {
                            
                                        var data = {
                                            nodes: data.nodes,
                                            edges: data.edges
                                        }
                                        var sys = arbor.ParticleSystem(700, 700, 0.5);
                                        sys.parameters({ gravity:true});
                                        sys.renderer = Renderer("#viewport");
                                        sys.graft(data);
                            
                                    });
                    });
})(this.jQuery);

PHP функция ответа выглядит следующим образом

public function getTreeGraphView() {
        
    if (isset($_POST['blm_mem_tree_meta_nonce']) && wp_verify_nonce($_POST['blm_mem_tree_meta_nonce'], 'blm_get_tree_view_meta_form_nonce'))
    {
        if(!empty($_POST['user_id'])){
            $data = array();
                    
            $mtree = new MemberTree();
            $mtree->getMemberTree($_POST['user_id']);
            $nodes_ = $mtree->getNode();
            $edges_ = $mtree->getEdge();
            $parent_ = $mtree->getParent();
                    
            $data['nodes'] = $nodes_;
            $data['edges'] = $edges_;
                
            echo $data;
            die( '0' );
                
        }
        wp_die();

    } else {
        wp_die(__('Указан неверный nonce', $this->plugin_name) , __('Ошибка', $this->plugin_name) , array(
            'response' => 403,
            'back_link' => 'admin.php?page=" . $this->plugin_name."-product',

        ));
    }
}

AJAX действие

$this->loader->add_action( 'admin_ajax_blm_member_tree_response', $plugin_admin, 'getTreeGraphView');

скрипт включен и локализация сделана как есть.

Процесс на 99% успешен, но admin-aax.php возвращает статус код 400. со следующим ответом

и также добавляется 0 к выводу. Я использовал wpdie() в конце функции

введите описание изображения здесь

Я больше не могу решить эту проблему. Есть ли здесь эксперт?

Измените ваше die( '0' ); на exit; и это сработает для вас.

Лучший способ вернуть JSON в WordPress это wp_send_json( $data, 200 )

узнайте больше здесь: https://developer.wordpress.org/reference/functions/wp_send_json/

.

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

Получение ошибки 400 при использовании jQuery и AJAX в WordPress происходит достаточно часто, особенно в контексте админской части сайта, где существует множество факторов, которые могут это вызвать. Разберемся в вашей ситуации детально.

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

У вас есть HTML-форма, отправляющая данные через AJAX-запрос в WordPress, где backend должен вернуть JSON с информацией об иерархии пользователей. Вот ключевые моменты вашего подхода:

  1. HTML-форма: Форма выглядит корректно, и отправка данных на admin-ajax.php должна сработать, если все остальные элементы на месте.

  2. JavaScript код: Ваш код на jQuery использует метод POST для отправки данных и ожидает успешного ответа с корректным форматом.

  3. PHP-функция: Это место, где возможно возникают проблемы. Нужно удостовериться, что данные обработаны правильно, и функция выполняет все проверки, чтобы не нарушать безопасность.

Возможные причины ошибки 400

  1. Проблемы с проверкой nonce: Ваш код уже использует wp_verify_nonce() для валидации nonce, что хорошо, но стоит убедиться, что nonce согласуется с той частью формы, откуда он генерируется.

  2. Некорректный ответ от сервера: В вашем PHP-коде используется echo $data и затем die('0'), что создает противоречивую ситуацию — вы отправляете ответ в формате, не соответствующем JSON, и добавляете 0 в конце, что является неинформативным ответом для AJAX-запроса.

Рекомендации по решению проблемы

  1. Использование wp_send_json:

    wp_send_json($data);

    Это гарантирует, что WordPress обработает JSON-ответ должным образом и вышлет его с правильными заголовками.

  2. Адекватное окончание функции: Замените die('0') и wp_die() на wp_send_json_error() или просто уберите их, так как wp_send_json завершает выполнение скрипта.

  3. Проверка Action и Hook в WordPress:

    Убедитесь, что запись action в add_action совпадает с названием действия в data атрибуте вашего AJAX-запроса. Ваш код для добавления action:

    $this->loader->add_action( 'wp_ajax_blm_member_tree_response', $plugin_admin, 'getTreeGraphView');

    Не забывайте, что если вы отправляете запрос из административной части, используйте wp_ajax_, а если из пользовательской, то wp_ajax_nopriv_.

Заключение

Эти шаги помогут устранить ошибку 400 и позволят вашему AJAX-запросу успешно обработать данные. Убедитесь, что вы правильно тестируете свой код с несколькими учётными записями пользователей и проверяете, как ведет себя ваше приложение в разных контекстах. Всегда держите безопасность и производительность в приоритете при разработке на WordPress.

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

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