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

Question

我是网站开发的新手，正在开发WordPress网站。 尽管与SO上的另一个问题类似，但该问题不使用jQuery.AJAX，而是使用请求类型为“ category”的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）POST- http：// localhost：81 / wordpress / wp-admin / admin-ajax.php

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

Answer 1

您好LCSF，欢迎来到StackOverflow。

您的代码中有多个错误。 当您应该将数据发布到my_ajax_callback函数时，您my_ajax_callback数据发布到my-ajax-test函数（不存在。您的主要插件函数是my_ajax_test ）。 那就是您通过wp_ajax动作钩子注册的功能。 这就是Wordpress无法找到您要采取行动的原因。 除此之外，您的回调函数还封装在主插件函数中，这就是即使更改Ajax请求也无法找到该函数的原因，因为它的范围很大。 要解决此问题，请执行以下操作：

1. 在您的JavaScript文件中，将Ajax函数中的action更改为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',