How do I send an ajax request and get a response back from a function?

Question

I've built a function within a plugin. I'd like to call it with an jQuery ajax function.

The function is defined as follows:

add_action( 'wp_ajax_my_test_ajax', 'my_test_ajax' );
add_action( 'wp_ajax_nopriv_my_test_ajax', 'my_test_ajax' );

function  my_test_ajax() {    

    $resp = array('title' => 'here is the title', 'content' => ' here is the content') ;        
    wp_send_json($resp) ;

}

I then attempt to call the function with from javascript:

var target = 'http://'  +  window.location.hostname  + '/wp-admin/admin-ajax.php' ;
var data = {
    action: ' my_test_ajax'
} ;
var req = jQuery.post( target , data,  function(resp) { 
    console.log(resp.responseText);
}) ;    
}

The site responds from admin-ajax.php. The response carries a '200 OK' header. The body of the response is '0'.

The codex tells me that I can expect this response if the value of 'action' in the post body doesn't match the name of a function hooked to the wordpress ajax hooks. But as far as I can tell, I'm good there.

I'm certain that the function is included in my plugin file.

What are the other barest essentials that I need to get this working?

(I don't want to worry about nonces or localizing js at this point. I just want to get a response from the function before I build up further)

Answer 1

$.ajax is very simple and you can append more parameters easily in the data: {action:'my_test_ajax'} line, try this:

var target = 'http://'  +  window.location.hostname  + '/wp-admin/admin-ajax.php';
$.ajax({
    url: ajax,
    data: {action:'my_test_ajax'},
    type: 'post',
    success: function(data){
        console.log(data, data.title, data.content)
    }
});

Make sure the target points exactly to admin-ajax.php or set a global variable (or using localize script) to add a variable where you store the path to admin-ajax.php which is admin_url('admin-ajax.php') in case of confusion.

$.ajax does parse JSON data by default, if working with other methods that return the response as is (string) then simply use JSON.parse(response) method. JSON that's because you use wp_send_json($resp) which returns a JSON object response in the endpoint.

Here's an example of adding more data to the request:

Using append method to the data variable or keeping it short and simple as data: {action:'my_test_ajax', name: 'dave', network: 'wpse'} and from the my_test_ajax function you can get these data by $_REQUEST[tag] e.g $_REQUEST['name']

$.get ( $_GET ) method:

This one is even more simple and takes less code:

$.get( target = '/wp-admin/admin-ajax.php?action=my_test_ajax', function( data ) {
    console.log( data )
});

Remember to use $_REQUEST in your PHP script because it merges all $_GET, $_POST and $_COOKIE data sets. Unless of course you are sure about the method you're working with.

Hope that helps.

Answer 2

1) you have an extra whitespace in code, and that's why it doesnt work:

action: ' my_test_ajax'
         ^

2) also, you must include check_admin_referrer() !!!!!!!!!

function  my_test_ajax() {  
   check_admin_referrer();
    .........
    .........
}