http400 Bad Request from AJAX code for WordPress

Question

I am new to website development and am developing a WordPress site. Although similar to another question on SO, that question does not use jQuery.AJAX but rather jQuery.post with a request type of 'category'. I have some sort of syntax problem when trying to use AJAX. I have created a simple plugin to enter a name, send it to the server, and have it echoed back. Following is the php file, 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');

The JS file, my-ajax-test.js looks like this:

// 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

All seems well, but nothing is being sent to the server with the button click. The Console log has an error:

HTTP400: BAD REQUEST - The request could not be processed by the server due to invalid syntax. (XHR)POST - http://localhost:81/wordpress/wp-admin/admin-ajax.php

I keep going over the code to see what I have wrong and can not find it. Any suggestions would be appreciated.

Possible duplicate of [400 Bad Request with Wordpress AJAX call](https://stackoverflow.com/questions/52434261/400-bad-request-with-wordpress-ajax-call) — cabrerahector, Sep 21 '18 at 14:59

score 0 · Answer 1 · answered Sep 22 '18 at 04:42

Hello LCSF and welcome to StackOverflow.

You have multiple errors in your code. You are posting your data to a my-ajax-test function (which doesn't exist. Your main plugin function is my_ajax_test) when what you should be doing is posting it to your my_ajax_callback function. That is the function you registered via the wp_ajax action hook. That is why Wordpress cannot find you action. In addition to that, your callback function is encapsulated inside your main plugin function, which is why even if you change the Ajax request the function will not be found due to it's scope. To solve this do the following:

In your JavaScript file change the action in your Ajax function to my_ajax_callback

Extract the my_ajax_callback function out of the my_ajax_test function. Your code structure will then look like this:

function my_ajax_test(){ 
    //content 
}

add_action( 'wp_ajax_my_ajax_callback', 'my_ajax_callback' );

function my_ajax_callback(){
    //content
}

Ivnhal · Answer 2 · 2018-09-21T15:48:41.473

-1

Action my-ajax-test is not what you need to pass as action parameter.

Replace:

action: 'my-ajax-test',

with:

action: 'my_ajax_callback',

edited Sep 21 '18 at 15:48

answered Sep 21 '18 at 15:29

Ivnhal

1,099
1
12
20

http400 Bad Request from AJAX code for WordPress

2 Answers2