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' );

@simpletome 👍

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

i get ...wp-admin/admin-ajax.php?action=example_ajax_request&fruit=Banana&nonce=4a39705836 400 (Bad Request)
code below.. what am i doing wrong

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);
    }
});  

});

function example_ajax_enqueue() {

// Enqueue javascript on the frontend.
wp_enqueue_script(
	'example-ajax-script',
	get_template_directory_uri() . '/js/my-ajax-script.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( 'ajax-nonce' )
	)
);

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

function example_ajax_request() {

$nonce = $_POST['nonce'];

if ( ! wp_verify_nonce( $nonce, 'ajax-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' );