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

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：错误请求 - 由于语法无效，服务器无法处理请求。 (XHR(邮政 - 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 文件中，将 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',