来自 WordPress 的 AJAX 代码的 http400 错误请求

Question

我是网站开发的新手，正在开发一个 WordPress 网站。尽管类似于 SO 上的另一个问题，但该问题不使用 jQuery.AJAX，而是使用请求类型为“类别”的 jQuery.post。我在尝试使用 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: BAD REQUEST - 由于语法无效，服务器无法处理请求。 (XHR)POST - http://localhost:81/wordpress/wp-admin/admin-ajax.php

我一直在检查代码以查看我有什么错误但找不到它。任何建议将不胜感激。

Answer 1

您好 LCSF，欢迎来到 StackOverflow。

您的代码中有多个错误。当您应该将数据发布到您的 my_ajax_callback 函数时，您将数据发布到 my-ajax-test 函数（不存在。您的主要插件函数是 my_ajax_test）。那就是您通过 wp_ajax 操作挂钩注册的功能。这就是为什么 Wordpress 找不到你的行动。除此之外，您的回调函数被封装在您的主插件函数中，这就是为什么即使您更改 Ajax 请求，由于它的作用域，该函数也不会被找到。要解决此问题，请执行以下操作：

1. 在您的 JavaScript 文件中，将 Ajax 函数中的 action 更改为 my_ajax_callback

2. 从my_ajax_test 函数中提取my_ajax_callback 函数。您的代码结构将如下所示：

   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',