Simple WordPress Ajax Example

example-ajax-enqueue.php

<?php
function example_ajax_enqueue() {

	// Enqueue javascript on the frontend.
	wp_enqueue_script(
		'example-ajax-script',
		get_template_directory_uri() . '/js/simple-ajax-example.js',
		array( 'jquery' )
	);

	// The wp_localize_script allows us to output the ajax_url path for our script to use.
	wp_localize_script(
		'example-ajax-script',
		'example_ajax_obj',
		array(
			'ajaxurl' => admin_url( 'admin-ajax.php' ),
			'nonce' => wp_create_nonce( 'example-nonce' )
		)
	);

}
add_action( 'wp_enqueue_scripts', 'example_ajax_enqueue' );

simple-ajax-example.js

jQuery(document).ready(function($) {
 
    // We'll pass this variable to the PHP function example_ajax_request
    var fruit = 'Banana';
     
    // This does the ajax request
    $.ajax({
        url: example_ajax_obj.ajaxurl,
        data: {
            'action': 'example_ajax_request',
            'fruit' : fruit,
            'nonce' : example_ajax_obj.nonce
        },
        success:function(data) {
            // This outputs the result of the ajax request
            console.log(data);
        },
        error: function(errorThrown){
            console.log(errorThrown);
        }
    });  
              
});

simple-ajax-example.php

<?php
function example_ajax_request() {
 
    $nonce = $_POST['nonce'];

    if ( ! wp_verify_nonce( $nonce, 'example-nonce' ) ) {
        die( 'Nonce value cannot be verified.' );
    }
 
    // 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
   die();
}
 
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' );

Would you mind giving an HTML demo so I get it to work and then try to tweak it ?

If you have added the nonce validation part, that would be awesome. Anyway thanks for the snippet.

Thank you so much!

Thank you Devinsays. It was very helpfull to me.

using:

echo json_encode($_REQUEST);

you can return JSONified output as usually requested.

If you have added the nonce validation part, that would be awesome. Anyway thanks for the snippet.

Agree!

Updated the gist to include the nonce validation. Hope that's helpful.

Updated the gist to include the nonce validation. Hope that's helpful.

it is giving 400 bad error in the latest WordPress version

@jefreylandicho

Updated the gist to include the nonce validation. Hope that's helpful.

it is giving 400 bad error in the latest WordPress version

I had the same thing - first because I didn't had the handler function "example_ajax_request" implemented correctly

After that, I got that error because I was using the nopriv when logged in (or the other way around). When following the code correctly, it did work in the end.

I can't get it to work. It's always returning Error 400 Bad Request.

• function example_ajax_enqueue() {...} => functions.php (in theme directory with path checked at line 7)
• js file (with permissions checked - 0755)
• calling simple-ajax-example.php

Error:
jquery.js?ver=1.12.4-wp:4 GET wp-admin/admin-ajax.php?action=example_ajax_request&fruit=Banana&nonce=ae030e8819 400 (Bad Request)

Wordpress: 5.5.3
Theme: Directory2 (AIT-Themes)

wp_verify_nonce( $nonce, 'example-ajax-script' ) should be wp_verify_nonce( $nonce, 'ajax-nonce' )
And your ajax request is missing method/type as post e.g method: "POST"

wp_verify_nonce( $nonce, 'example-ajax-script' ) should be wp_verify_nonce( $nonce, 'ajax-nonce' ) And your ajax request is missing method/type as post e.g method: "POST"

He's right!

@simpletome 👍

Sorry about that. Updated the gist to create example-nonce and then verify example-nonce.