http400 Неверный запрос от AJAX-кода для WordPress

Question

Я новичок в разработке веб-сайтов и занимаюсь разработкой сайта на WordPress.Хотя этот вопрос похож на другой вопрос о SO, он использует не jQuery.AJAX, а jQuery.post с типом запроса 'category'.У меня есть какая-то проблема с синтаксисом при попытке использовать AJAX.Я создал простой плагин, чтобы ввести имя, отправить его на сервер и вернуть его обратно.Ниже приведен php-файл my-ajax-test.php:

add_action( 'wp_enqueue_scripts', 'ajax_test_enqueue_scripts' );
function ajax_test_enqueue_scripts() {
    wp_enqueue_script( 'my-script-handler', plugins_url( '/my-ajax-test.js', __FILE__ ), array('jquery'), '1.0', true );
    wp_localize_script( 'my-script-handler', 'ajax_test', array(
        'ajax_url' => admin_url( 'admin-ajax.php' )
    ));
}
function my_ajax_test() {
/**** Create Input Form ****************************/
?>
    <h2>Select Persons You Wish to Register</h2>

    <form action="">
    <input type="text" id="ajax_guest_name" name="guest_name">
    <p id="ajax_guest_text">Enter Guest Name</p>
    <br><br>
    <input type="button" id="ajax_rsvp" name="ajax_guest" value="Register Guest">
    </form> 

<?php   
add_action( 'wp_ajax_my_ajax_callback', 'my_ajax_callback' );

function my_ajax_callback() {
    $guest_name = $_POST[ajax_guest_name];
    echo $guest_name;
    die();
}
};

add_shortcode('My-AJAX-Test', 'my_ajax_test');

Файл JS my-ajax-test.js выглядит следующим образом:

// use wordpresses version of script
var $jq = jQuery.noConflict();

$jq(document).ready(function(){ 

$jq("#ajax_rsvp").click(function(){
/* Send guest name to server via AJAX */

    var g_name = document.getElementById("ajax_guest_name").value;
    alert("RSVP Button was clicked with Guest Name: " + g_name);

$jq.ajax({
    url : ajax_test.ajax_url,
    type : 'post',
    data : {
        action: 'my-ajax-test',
        ajax_guest_name : g_name
    },
    success:function(data) {
        // This outputs the result of the ajax request
        console.log(data);
    },
    error: function(errorThrown){
        console.log(errorThrown);
    }
}); // End of AJAX function

}); // End of button click function

}); // End of Main Document Ready Function

Все выглядит хорошо, но ничего не отправляется на сервер нажатием кнопки.Журнал консоли содержит ошибку:

HTTP400: ЗАПРОС ПЛОХОЙ - запрос не может быть обработан сервером из-за неверного синтаксиса.(XHR) POST - http://localhost:81/wordpress/wp-admin/admin-ajax.php

Я продолжаю изучать код, чтобы увидеть, что у меня не так, и не могу его найти.Любые предложения будут оценены.

Answer 1

Здравствуйте, LCSF и добро пожаловать в StackOverflow.

В вашем коде несколько ошибок.Вы отправляете свои данные в функцию my-ajax-test (которая не существует. Ваша основная функция плагина - my_ajax_test), когда вам нужно отправить ее в вашу функцию my_ajax_callback.Это функция, которую вы зарегистрировали через хук действия wp_ajax.Вот почему WordPress не может найти ваши действия.Кроме того, ваша функция обратного вызова инкапсулирована в вашей основной функции плагина, поэтому даже если вы измените запрос Ajax, функция не будет найдена из-за ее области действия.Чтобы решить эту проблему, сделайте следующее:

1. В вашем файле JavaScript измените action в вашей функции Ajax на my_ajax_callback

2. Извлеките функцию my_ajax_callback изфункция my_ajax_test.Ваша структура кода будет выглядеть следующим образом:

   function my_ajax_test(){ 
       //content 
   }
   
   add_action( 'wp_ajax_my_ajax_callback', 'my_ajax_callback' );
   
   function my_ajax_callback(){
       //content
   }
   

Answer 2

Действие my-ajax-test - это не то, что вам нужно передать в качестве параметра действия.

Заменить:

action: 'my-ajax-test',

на:

action: 'my_ajax_callback',