web-dev-qa-db-de.com

Grundlegendes Wordpress AJAX Anruf

Ich habe eine neue WP -Installation und zum Zwecke der Vereinfachung habe ich derzeit nur eine einfache Aktion in meinem 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' );

Jetzt ist es mein Ziel, mithilfe von JQuery/JavaScript einen AJAX -Aufruf an meinen WordPress-Endpunkt zu senden, das Objekt fruits json zurückzugewinnen und es beim Rendern der Zielseite einfach als Konsole auszudrucken.

Das habe ich versucht:

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
            }
        });
});

Derzeit erhalte ich eine JQuery nicht definiert Fehler, obwohl es in die Warteschlange eingereiht zu sein scheint. Zweitens bin ich mir nicht sicher, ob ich das überhaupt richtig implementiere, da ich WP AJAX noch nie zuvor verwendet habe. Im Moment ist es mein Ziel, ein einfaches Beispiel zum Laufen zu bringen. Ich freue mich über Vorschläge, wie dies erreicht werden kann.

Vielen Dank

2
AnchovyLegend

WordPress AJAX verwendet Aktionen, um Ihre jQuery actionmit einer herkömmlichen WordPress-Aktion zu verbinden. Werfen Sie einen Blick auf das Beispiel, das WordPress in seinen Dokumenten bereitstellt . Es gibt 2 Haken:

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

Das Obige funktioniert nur für authentifizierte (angemeldete) Benutzer. Für nicht angemeldete Benutzer verwenden wir noprivname__:

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

In unserem Fall würden wir also beide verwenden:

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

Beachten Sie, dass ich den Namen Ihrer Rückruffunktion geändert habe, um festzustellen, dass die Ajax-Aktion und der Rückrufname nicht identisch sein müssen. Beachten Sie auch, dass Sie echo diese Daten verwenden möchten, anstatt sie zurückzugeben.

4
Howdy_McGee

Sie müssen einen Ajax-Aktions-Hook verwenden, um Ihre JQuery-Aktion auszuführen.

für angemeldeten Benutzer:

add_action('wp_ajax_getFruits', 'getFruits);

für nicht angemeldete Benutzer:

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