How to avoid admin-ajax.php 400 bad request error when trying to use ajax in your WordPress plugin

When you are trying to use ajax technich in wordpress plugin development, there are some difference than the normal way. I have been working and searching on it for a very long time, very difficult to get one post to make it very clear. So here, I am trying to make a better explaination about all the key points of that.

Since the way to use ajax in wordpress back-end are different as front-end, and in back-end , it is easier. I will only make a topic focuse on front end .

Before you read this artical, please make sure that you have the basice knowlage regarding WordPress plugin development, ajax, php etc, so that you will not wast your time to read it and get nothing help for you .

Great, Let’s begin.

Key point 1

If you have a separate javaScript file , let’s assume the file is js/your_ajax_script.js under the plugin folder, then you must make sure that you use  wp_enqueue_script() to include this script first. and then use wp_localize_script() to create a ajax_object for your further use.

add_action( 'wp_enqueue_scripts', array($this, 'enqueue_frontend_script') );

function enqueue_frontend_script(){
        wp_enqueue_script( 'ajax-script', PLUGIN_URL . 'js/your-ajax-script.js', array('jquery') );
        wp_localize_script( 'ajax-script', 'your_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}

PLUGIN_URL is a const reffering your plugin url, your_ajax_object is the name of the ajax_object, you can name it whatever you like. array( ‘ajax_url’ => admin_url( ‘admin-ajax.php’ ) is a defination of the property ajax_url of your_ajax_object . Make sure there are not typos for admin_url( ‘admin-ajax.php’ )

Key point 2

Let’s look at the script first.

jQuery(document).ready(function($){
    $('.btn_del_row').click(function(){
        var id = $(this).data('id');
        var confirmalert = confirm("Are you sure ?");
        if (confirmalert == true) {
            var data = {
                'action': 'your_ajax_action',
                'id'    : id,
            };
            jQuery.post( your_ajax_object.ajax_url, data, function(response){
                alert('Got this from the server: ' + response);
            });
        }
    });
});

In this java script , make sure use your defined ajax_object and its property , in our case it is your_ajax_object.ajax_url .

In the data which will be sent to the action, you must mention the action name , in our case is this scentance ‘action’: ‘your_ajax_action’, you can name this action name whatever you like , but remember, you have to use the exact same name wherever it is needed. You will see.

Key point 3

Hook your action function, for both loged in and nologed in user.

add_action( 'wp_ajax_your_ajax_action', 'your_ajax_action' );
add_action( 'wp_ajax_nopriv_your_ajax_action', 'your_ajax_action' );

function your_ajax_action (){
    global $wpdb;
    $id = $_POST['id'];
    // do something you like ...
    echo $result;
    wp_die();
}

Look at the above code, hope you noticed that there are 5 places using the same word “your_ajax_action” which is defined in your javascript code. this must be the exact the same , otherwise ,it will not work.

At the end of the php function , don’t forget close it use wp_die();

Using ajax in wordpress plugin is little bit annoying, but hope you will be sucessfully make it done after follow my explaination.