Wordpress AJAX 基本寫法格式

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

define_ajaxurl.php

<?php
/*
http://wordpress.org/support/topic/ajaxurl-is-not-defined
The ajaxurl is only defined in the admin section. 
If you need the url on the front end, 
use <?php echo admin_url('admin-ajax.php'); ?> instead.
If you need it for use by a separate static JS file on the front end, 
add this to the plugin/theme/wherever:
*/
?>
<?php
  add_action('wp_head','pluginname_ajaxurl');
    function pluginname_ajaxurl() {
?>
    <script type="text/javascript">
      var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
    </script>

<?php
    }
?>

front_end_ajax.js

<script type="text/javascript">
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: ajaxurl,
        data: {
            'action':'example_ajax_request',
            'fruit' : fruit
        },
        success:function(data) {
            // This outputs the result of the ajax request
            console.log(data);
        },
        error: function(errorThrown){
            console.log(errorThrown);
        }
    });  
              
});
</script>