Wordpress -- Simple Ajax Example

footerphp.js

<script type="text/javascript">
	jQuery('#ajax-link').click(function($) {
		ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
	    // We'll pass this variable to the PHP function example_ajax_request
	    var fruit = 'Banana';
	    // This does the ajax request
	    jQuery.ajax({
	        url: ajaxurl,
	        data: {
	            'action':'example_ajax_request',
	            'fruit' : fruit
	        },
	        success:function(data) {
	            // This outputs the result of the ajax request
	            jQuery('.ajax-content').html(data);
	        },
	        error: function(errorThrown){
	            console.log(errorThrown);
	        }
	
	    });
	});
</script>

function.php

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

htmlstructure.php

<div id="ajax-link">ClickHere</div>
<div class="ajax-content"></div>

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.