web-dev-qa-db-fra.com

Wordpress de base AJAX Appel

J'ai une nouvelle installation WP et, dans le but de garder les choses simples, je n'ai actuellement qu'une action simple comme suit dans mon functions.php:

function getFruits() {
    return json_encode( ['fruits' => ['apples', 'pears']]);
} 

function my_enqueue() {    
    wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/my-ajax-script.js', array('jquery') );

    wp_localize_script( 'ajax-script', 'my_ajax_object',
        array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );

Maintenant, mon objectif est d’utiliser JQuery/JavaScript pour effectuer un appel AJAX sur mon terminal wordpress, récupérer l’objet fruits json et l’imprimer console simplement lors du rendu de la page de destination.

C'est ce que j'ai essayé:

twentyseventeen\js\my-ajax-script.js:

$(document).ready(function() {
    $.ajax(
        {
            type: "get",
            data : {
                action: 'getFruits'
            },
            dataType: "json",
            url: my_ajax_object.ajax_url,
            success: function(msg){
                console.log(msg); //output fruits to console
            }
        });
});

Actuellement, je reçois une erreur JQuery n'est pas définie, même si elle semble être mise en file d'attente. Deuxièmement, je ne suis même pas sûr de bien implémenter ceci car je n’avais jamais utilisé WP AJAX auparavant. Donc, pour le moment, mon objectif est simplement de faire fonctionner un exemple de base. J'apprécie toutes les suggestions sur la façon d'accomplir cela.

Je vous remercie

jqueryajaxapi
2
AnchovyLegend

WordPress AJAX utilise des actions pour connecter votre jQuery action à une action WordPress traditionnelle. Jetez un coup d’œil à l’exemple fourni par WordPress dans leur documentation . Il y a 2 crochets:

add_action( "wp_ajax_{$jquery_action_string}", "callback_function_name" );

Ce qui précède ne fonctionnera que pour les utilisateurs authentifiés (connectés). Pour les utilisateurs non connectés, nous utilisons nopriv:

add_action( "wp_ajax_nopriv_{$jquery_action_string}", "callback_function_name" );

Donc, dans notre cas, nous utiliserions les deux:

function return_fruits() {
    echo json_encode( ['fruits' => ['apples', 'pears']]);
    exit();
}
add_action( 'wp_ajax_getFruits', 'return_fruits' );
add_action( 'wp_ajax_nopriv_getFruits', 'return_fruits' );

Remarque, j'ai changé le nom de votre fonction de rappel pour indiquer que l'action ajax et le nom du rappel ne doivent pas nécessairement être identiques. Notez également que vous voudriez echo ces données au lieu de les renvoyer.

4
Howdy_McGee

Vous devez utiliser ajax action hook pour effectuer votre action jquery.

pour l'utilisateur connecté:

add_action('wp_ajax_getFruits', 'getFruits);

pour les utilisateurs non connectés:

add_action('wp_ajax_nopriv_getFruits', 'getFruits');

function get_fruits(){
$response = array('Fruits'=> ['banana', 'Apple']);
//use this function and make a response then send the response
wp_send_json_success(array('response'=>$response));
// by using wp_send_json_success() you don't need to exit and parse response
}
0
Jitender Singh