Tmomaster: 1 versie geïmporteerd

2020-09-13T20:10:41Z

1 versie geïmporteerd

← Oudere versie	Versie van 13 sep 2020 22:10
(geen verschil)

a>Admin op 19 dec 2018 om 08:03

2018-12-19T08:03:01Z

Nieuwe pagina

{{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. 
<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>
 

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

{{sys:head|text=Voorbeeld functions.php}} 
<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> 
{{sys:head|text=Voorbeeld template met inline javascript}} 
Het javascript bestand wordt wel aangemaakt, maar bevat geen code. Deze staat inline.
<tt> 
<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}}

Wordpress:Handleiding:Ajax - Bewerkingsoverzicht

Tmomaster: 1 versie geïmporteerd

a>Admin op 19 dec 2018 om 08:03