Wordpress:Handleiding:Ajax
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[1]
Declareren
In de functions.php worden de volgende functies opgenomen.
<?php
function aaa(){
// Enqueue javascript on the frontend.
wp_enqueue_script('bbb',get_template_directory_uri() .'ccc',array('jquery'));
// The wp_localize_script allows us to output the ajax_url path for our script to use.
wp_localize_script('bbb','ddd',array( 'eee' => admin_url( 'admin-ajax.php')));
}
add_action( 'wp_enqueue_scripts', 'aaa' );
function fff() {
// 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_fff', 'fff' );
// If you wanted to also use the function for non-logged in users (in a theme for example)
add_action( 'wp_ajax_nopriv_fff', 'fff' );
Onderstaand het Javascript bestand met als pad/naam ccc
jQuery(document).ready(function() {
jQuery.ajax({
type:'post',
url: 'eee' , // or 'ddd.eee' if using on frontend
dataType:'json',
data: {'action': 'fff','ggg' :hhh},
success:function(data) {console.log(data);},
error: function(errorThrown){console.log(errorThrown);}
});
});
aaa: Naam functie
bbb: Willekeurige naam
ccc: Javascript bestand voorbeeld (/js/simple-ajax-example.js)
ddd: Naam ajax object (voorbeeld example_ajax_obj)
eee: Url website (voorbeeld ajaxurl)
fff: PHP functie die wordt aangeroepen door jQuery.ajax (voorbeeld example_ajax_request)
ggg: Naam parameter
hhh: Waarde parameter
Voorbeeld functions.php
<?php
function aaa(){
wp_enqueue_script('bbb',get_template_directory_uri() .'ccc',array('jquery'));
wp_localize_script('bbb','ddd',array( 'eee' => admin_url( 'admin-ajax.php')));
}
add_action( 'wp_enqueue_scripts', ' aaa' );
function fff() {
...
}
add_action( 'wp_ajax_fff', 'fff' );
add_action( 'wp_ajax_nopriv_fff', 'fff' );
Voorbeeld template met inline javascript
Het javascript bestand wordt wel aangemaakt, maar bevat geen code. Deze staat inline.
<body>
<script>
jQuery(document).ready(function() {
jQuery.ajax({
type:'post',
url: 'eee' , // or 'ddd.eee' if using on frontend
dataType:'json',
data: {'action': 'fff','ggg' :hhh},
success:function(data) {console.log(data);},
error: function(errorThrown){console.log(errorThrown);}
});
});
</script>
</body>
| Bronnen, noten en/of referenties: |
|