Вопрос или проблема
Я работаю над графом 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 с информацией об иерархии пользователей. Вот ключевые моменты вашего подхода:
-
HTML-форма: Форма выглядит корректно, и отправка данных на
admin-ajax.php
должна сработать, если все остальные элементы на месте. -
JavaScript код: Ваш код на jQuery использует метод POST для отправки данных и ожидает успешного ответа с корректным форматом.
-
PHP-функция: Это место, где возможно возникают проблемы. Нужно удостовериться, что данные обработаны правильно, и функция выполняет все проверки, чтобы не нарушать безопасность.
Возможные причины ошибки 400
-
Проблемы с проверкой nonce: Ваш код уже использует
wp_verify_nonce()
для валидации nonce, что хорошо, но стоит убедиться, что nonce согласуется с той частью формы, откуда он генерируется. -
Некорректный ответ от сервера: В вашем PHP-коде используется
echo $data
и затемdie('0')
, что создает противоречивую ситуацию — вы отправляете ответ в формате, не соответствующем JSON, и добавляете0
в конце, что является неинформативным ответом для AJAX-запроса.
Рекомендации по решению проблемы
-
Использование
wp_send_json
:wp_send_json($data);
Это гарантирует, что WordPress обработает JSON-ответ должным образом и вышлет его с правильными заголовками.
-
Адекватное окончание функции: Замените
die('0')
иwp_die()
наwp_send_json_error()
или просто уберите их, так как wp_send_json завершает выполнение скрипта. -
Проверка 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.