Make an ajax call from WordPress admin area

WordPress made it so easy to use ajax in admin and front-end areas since the ajax is built into WordPress core.

Let’s see the short example of this:

1. Without separate javascript file
2. With separate javascript file

You can create a file in your plugin OR you can use your theme’s functions.php file for this.

1. Without separate javascript file

There is an action hook called admin_footer, using that we can embed the javascript code into the admin footer area.

1. create an ajax request from javascript and pass action variable as data.
2. WordPress uses wp_ajax_ action hook to detect all ajax requests coming from admin or front-end area. You need to specify this as prefix with your action name like this wp_ajax_your_action_name. See the below example for this.

ajaxurl javascript global variable is defined for the admin area which gets the admin-ajax.php url.

/**
* Make your ajax call in wp_footer hook
*/
function ajax_without_file() { ?>
    <script type="text/javascript" >
    	jQuery(document).ready(function($) {
        	var dataVariable = {
            	'action': 'my_action_without_file', // your action name
            	'variable_name': "Some value" // some additional data to send
        	};

        	jQuery.ajax({
            	url: ajaxurl, // this will point to admin-ajax.php
            	type: 'POST',
            	data: dataVariable, 
            	success: function (response) {
                	console.log(response);
            	}
        	});
    	});
    </script> 
<?php
}
add_action( 'admin_footer', 'ajax_without_file' );

/** 
* Callback function of ajax
*/
function my_action_without_file(){
    echo json_encode($_POST);
    wp_die();
}
add_action("wp_ajax_my_action_without_file" , "my_action_without_file");

2. With separate javascript file

Create a sample-scripts.js file and include this code

jQuery(function ($) {

    var testingObj = {
        init: function () {
            testingObj.callAjaxMethod();
        },
        callAjaxMethod:function(){
            var data = {
                'action': 'my_action_with_file',  // your action name
                'name': "Shweta"
            };

            $.ajax({
                url: ajaxurl,
                type: 'POST',
                data: data,
                success: function (response) {
                    console.log(response);
                }
            });
        }
    }
    testingObj.init();
});

Create a php file and use admin_enqueue_scripts action hook to include js file in admin footer.

/**
* Enqueue your js file
*/
function enqueue_my_script() {
    wp_enqueue_script( 'my-script', plugin_dir_url(__FILE__).'sample-scripts.js', array('jquery'), null, true );
}
add_action( 'admin_enqueue_scripts', 'enqueue_my_script' );

/**
* Your ajax function
*/
function my_action_with_file(){
    echo json_encode($_POST);
    wp_die();
}
add_action("wp_ajax_my_action_with_file", "my_action_with_file");

Here, in both cases, you can check the output in console log.