Brontekst bekijken van Wordpress:Handleiding:Ajax

{{sys:head|text=Gebruik van Ajax met Wordpress}}

Het middels jQuery.ajax uitvoweren van een PHP bestand waarin gebruik gemaakt wordt van Wordpress statements zoals ''$wpbd'' is als volgt<ref name="w">Informatie afkomstig van {{#tag:easyview|https://gist.github.com/devinsays/69a305053e35a10584f94d6011bba2d6|type=iframe|thumbnail=example-ajax-enqueue.php|direct=true}}</ref>

{{sys:head|text=Declareren}}
In de ''functions.php'' worden de volgende functies opgenomen.<br>
<tt>
<?php
 function </tt>'''aaa'''<tt>(){
    // Enqueue javascript on the frontend. 
   wp_enqueue_script('</tt>'''bbb'''<tt>',get_template_directory_uri() .'</tt>'''ccc'''<tt>',array('jquery'));
   // The wp_localize_script allows us to output the ajax_url path for our script to use.
   wp_localize_script('</tt>'''bbb'''<tt>','</tt>'''ddd'''<tt>',array( '</tt>'''eee'''<tt>' => admin_url( 'admin-ajax.php')));
 }
 add_action( 'wp_enqueue_scripts', '</tt>'''aaa'''<tt>' );
 function </tt>'''fff'''<tt>() {
     // 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_</tt>'''fff'''<tt>', '</tt>'''fff'''<tt>' );
 // If you wanted to also use the function for non-logged in users (in a theme for example)
 add_action( 'wp_ajax_nopriv_</tt>'''fff'''<tt>', '</tt>'''fff'''<tt>' );
</tt>
{{sys:head|text=Onderstaand het Javascript bestand met als pad/naam '''ccc'''}}
<tt>
  jQuery(document).ready(function() {
   jQuery.ajax({
        type:'post',
        url:  '</tt>'''eee'''<tt>' , // or '</tt>'''ddd'''.'''eee'''<tt>'  if using on frontend
        dataType:'json',
        data: {'action': '</tt>'''fff'''<tt>','</tt>'''ggg'''<tt>' :</tt>'''hhh'''<tt>},
        success:function(data) {console.log(data);},
        error: function(errorThrown){console.log(errorThrown);}
    });          
 });
</tt>
<br>

<br>
'''aaa''': Naam functie<br>
'''bbb''': Willekeurige naam<br>
'''ccc''':   Javascript bestand voorbeeld (<tt>/js/simple-ajax-example.js</tt>)<br> 
'''ddd''':  Naam ajax object (voorbeeld <tt>example_ajax_obj</tt>)<br>
'''eee''':  Url website (voorbeeld <tt>ajaxurl</tt>)<br>
'''fff''':  PHP functie die wordt aangeroepen door jQuery.ajax (voorbeeld <tt>example_ajax_request</tt>)<br>
'''ggg''': Naam parameter<br>
'''hhh''': Waarde parameter

{{sys:head|text=Voorbeeld functions.php}}<br>
<tt>
<?php
 function </tt>'''aaa'''<tt>(){
   wp_enqueue_script('</tt>'''bbb'''<tt>',get_template_directory_uri() .'</tt>'''ccc'''<tt>',array('jquery'));
   wp_localize_script('</tt>'''bbb'''<tt>','</tt>'''ddd'''<tt>',array( '</tt>'''eee'''<tt>' => admin_url( 'admin-ajax.php')));
 }
 add_action( 'wp_enqueue_scripts', ' </tt>'''aaa'''<tt>' );
 function </tt>'''fff'''<tt>() {
   ...
 }
 add_action( 'wp_ajax_</tt>'''fff'''<tt>', '</tt>'''fff'''<tt>' );
 add_action( 'wp_ajax_nopriv_</tt>'''fff'''<tt>', '</tt>'''fff'''<tt>' );
</tt><br>
{{sys:head|text=Voorbeeld template met inline javascript}}<br>
Het javascript bestand wordt wel aangemaakt, maar bevat geen code. Deze staat inline.
<tt><br>
<body>
 <script>
  jQuery(document).ready(function() {
   jQuery.ajax({
        type:'post',
        url:  '</tt>'''eee'''<tt>' , // or '</tt>'''ddd'''.'''eee'''<tt>'  if using on frontend
        dataType:'json',
        data: {'action': '</tt>'''fff'''<tt>','</tt>'''ggg'''<tt>' :</tt>'''hhh'''<tt>},
        success:function(data) {console.log(data);},
        error: function(errorThrown){console.log(errorThrown);}
    });          
 });
 </script>
</body></tt>
{{sys:ref:reference}}
{{sys:head:links}}
* {{#tag:easyview|https://wptheming.com/2013/07/simple-ajax-example/|type=iframe|thumbnail=Simple Ajax Example}}
* {{#tag:easyview|https://www.sitepoint.com/how-to-use-ajax-in-wordpress-a-real-world-example/|type=iframe|thumbnail=How to Use Ajax in WordPress – a Real World Example}}
* {{#tag:easyview|https://gist.github.com/devinsays/69a305053e35a10584f94d6011bba2d6|type=iframe|thumbnail=example-ajax-enqueue.php|direct=true}}