Simple Ajax Example

This is a basic example of how to use AJAX in WordPress. It shows how to take a variable from javascript, pass it to a PHP function (altering it slightly), and then pass it back to the javascript.

This assumes you already know how to enqueue javascript, etc.

Javascript Piece

jQuery(document).ready(function($) {

	// We'll pass this variable to the PHP function example_ajax_request
	var fruit = 'Banana';
	// This does the ajax request
		url: ajaxurl,
		data: {
			'fruit' : fruit
		success:function(data) {
			// This outputs the result of the ajax request
		error: function(errorThrown){

PHP Piece

function example_ajax_request() {

	// The $_REQUEST contains all the data sent via ajax 
	if ( isset($_REQUEST) ) {
		$fruit = $_REQUEST['fruit'];
		// Let's take the data that was sent and do something with it
		if ( $fruit == 'Banana' ) {
			$fruit = 'Apple';
		// Now we'll return it to the javascript function
		// Anything outputted will be returned in the response
		echo $fruit;
		// If you're debugging, it might be useful to see what was sent in the $_REQUEST
		// print_r($_REQUEST);
	// Always die in functions echoing ajax content

add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );

// If you wanted to also use the function for non-logged in users (in a theme for example)
// add_action( 'wp_ajax_nopriv_example_ajax_request', 'example_ajax_request' );

About Devin

I'm a WordPress developer based in Austin, Texas. I run a little theme shop called DevPress and work for a startup called Nano. Find me on twitter @devinsays.

39 Responses

  1. Hi Devin,
    Simple and effective, i have seen others ajax tutorials with wordpress (complex ones), but until now, i do really understand how it works, the only question i still have is this:
    In this hook:

    add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );

    the hook name must start with “wp_ajax_xxxxxxx” because wp define it to be in that way, right?

    1. Since WP 2.8 version, ajaxurl works only for administration dashboard purpose.
      try to use
      wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );

      1. Paul


        This doesn’t seem to work for me. I added the wp_localize_script bit to my functions.php but still get the ajaxurl is not defined error. I’m using your tutorial on a wp frontend page.


      2. Paul, use ajax_object.ajaxurl, because “ajax_object” is the name that WordPress will give the javascript object which will contain all the supplied variables.

  2. Is it possible to use the PHP function for logged-out users only? i.e. Can I omit the following?

    add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );

      1. Thanks for your reply.

        That’ll be fine. My use case is a registration form so the end user will never be logged-in at the point at which this fires.

  3. tarun

    Hi, great tutorial, simple and to the point. I see that the jquery code logs the data echoed by the php function. Is there anyway to use the variables defined in the php function inside the jquery success output?


  4. Jeroen

    hey dude,

    Thanks. This helped me a lot. Was building a plugin and got response 0 all the time.

    I forgot to require_once() the actual php file that was used for processing.

  5. Devin, great simple tutorial but I would try to update the tutorial with using a nonce or either tell beginner AJAX developers that using nonce should be done for security reasons.

    Again Nice Simple Tutorial for Beginners.


  6. Jerome Gaynor

    I solved the “ajaxurl is not defined” issue in this way:

    (1) Added this to my php:


    (2) Added this to the top of my javascript:

    var ajaxurl = $(“input#ajaxurl”).val();

    Worked like a charm after that. Thanks Devin!

  7. Jerome Gaynor

    Sorry, the comment removed my code… I’ll try again. The bit I added in step 1 is:
    <input type="hidden" id="ajaxurl" value="” />

  8. Garrett

    Hello, I’m having a very strange issue.

    The AJAX is only working on one page. It won’t work with any other pages on the site. In the console, it says “Can’t find variable: ajaxurl”. I’m loading the JS globally as well. I could see that happened if I loaded it conditionally such as is_page() or something like that but its global. Am I missing something simple?

  9. finnaly i understood how ajax in wp should work (after a whole day of searches) but is not working for me because the ajaxurl is not defined.

    tried the:

    wp_localize_script( ‘ajax-script’, ‘ajax_object’, array( ‘ajax_url’ => admin_url( ‘admin-ajax.php’ ) ) );


    wp_localize_script( ‘ajax-script’, ‘ajax_object.ajaxurl’, array( ‘ajax_url’ => admin_url( ‘admin-ajax.php’ ) ) );

    but still it can’t recognize the ajaxurl…

    i’m new to wp so i would be glad if u can update the post with how to register the ajaxurl variable.

    also i can see that im not the only one having this question.


  10. @Cezar @Garret

    Make sure in your js you are calling the function name of your script

    Example if the following

    wp_localize_script( ‘ajax-script’, ‘ajax_object’, array( ‘ajaxurl’ => admin_url(‘admin-ajax.php’ ) ) );

    Then your js url would be ajax_object.ajaxurl

  11. Greg

    I have spent a full day on this. All I get returning to the script is the html of the page itself. It does’t make any sense. I don’t know if using the Genesis framework is causing issues.

Leave a Reply