it-swarm.com.de

Die richtige Methode zum Übergeben von Abfragevariablen AJAX mit Ajaxurl

OK, ich hatte keine Ahnung, wie ich dieses Thema benennen sollte.

Ich versuche, das Standardverhalten mit Ajax zu überschreiben. Das Problem ist hier eigentlich kein Problem, sondern ein Wunsch mehr.

Ich habe diese URL:

<a href="http://example.com/?reaction=smk_remove_post&id=1226&_nonce=7be82cd4a0" class="smk-remove-post">Remove post</a>

Im functions.php habe ich diese Funktion und den Aufruf gleich nach:

function smk_remove_post(){
    if( !empty( $_GET['reaction'] ) && 'smk_remove_post' == $_GET['reaction'] && !empty( $_GET['id'] ) ){
        if( current_user_can('edit_others_posts') && !empty($_GET['_nonce']) ){
            if( wp_verify_nonce( esc_html( $_GET['_nonce'] ), 'smk_remove_post' ) ){
                // Delete the post
                wp_delete_post( absint( $_GET['id'] ), true );
            }
        }
    }
}
smk_remove_post();

Wenn ich jetzt auf den Link klicke, wird der Beitrag mit der ID 1226 entfernt. Alles ist ok. Die Aufgabe ist erfolgreich erledigt und die Seite wird neu geladen.

Hier brauche ich den AJAX. Ich möchte diese URL mit Ajax verarbeiten und die Seite nicht neu laden, und eine richtige Antwort erhalten .

Ich habe dieses jQuery-Skript hinzugefügt:

function smk_remove_post(){
    $('.smk-remove-post').on( 'click', function( event ){
        event.preventDefault();
        var _this = $(this);

        jQuery.ajax({
            type: "GET",
            url: _this.attr('href'),
            success: function(response){
                console.log(response);
                _this.text('All great, the post is removed.');
            }
        });
    });
}
smk_remove_post();

Alles funktioniert wie erwartet. Der Beitrag wird über Ajax entfernt und die Seite muss nicht neu geladen werden. Ich kann jedoch keine richtige Antwort erhalten, sondern erhalte die vollständige HTML-Quelle der aktuellen Seite.

Ich weiß, dass ich admin-ajax.php (ajaxurl) verwenden sollte, aber wie mache ich das? Ich muss die Abfrage von der URL senden und die Antwort zurückerhalten.

Hier ist, was ich versucht habe:

Ich habe dies dem obigen jQuery-Skript hinzugefügt:

data: {
    'action': 'smk_remove_post_ajax',
},

Und das zum PHP:

function smk_remove_post_ajax(){
    smk_remove_post();
    die();
}
add_action('wp_ajax_smk_remove_post_ajax', 'smk_remove_post_ajax');

Es funktioniert nicht. Es wird ignoriert, der vorherige Aufruf wird sofort ausgeführt, genau wie dies ohne Ajax geschehen würde.

Ich verstehe, dass ich die Abfrage stattdessen irgendwie an admin-ajax.php senden muss, aber wie?

5
Andrei Surdu

Ich habe es endlich verstanden.

Der erste Fehler war, die gleiche Funktion zweimal auszuführen. Ich habe es einmal nach der Funktion und noch einmal in Ajax-Aktion aufgerufen. Bei Verwendung des Ajax-Aufrufs wurde die Funktion also zweimal ausgeführt. In dem Beispiel aus dem OP ist dies überhaupt kein Problem, da es vereinfacht ist, nur eine Sache zu tun, aber in meinem realen Code macht es viel mehr und kann zum Verlust unerwünschter Daten führen.

Außerdem musste ich nur die Ajax stoppen und eine benutzerdefinierte Antwort erhalten, sonst nichts. Folgendes habe ich getan:

1. Ich habe das geändert:

smk_remove_post();

dazu:

add_action('parse_query', 'smk_remove_post');

Es ist besser, die Funktion später auszuführen, wenn dies in einer speziellen Aktion erforderlich ist.

2. Als nächstes habe ich den Ajax-Handler geändert: Ich habe diese Zeile smk_remove_post(); gelöscht und die Ajax-Aktion von wp_ajax_smk_remove_post_ajax in wp_ajax_smk_remove_post geändert:

function smk_remove_post_ajax(){
    wp_die( 'ok' );
}
add_action('wp_ajax_smk_remove_post', 'smk_remove_post_ajax');

3. Ich habe die Abfragezeichenfolge reaction in action umbenannt. Änderte es in der URL und Funktion:

4. Zuletzt das jQuery-Skript geändert. Also benutzt es die admin-ajax.php und sendet die URL als Daten:

url: ajaxurl,
data: _this.attr('href'),

Hier ist der endgültige Code:

Verknüpfung:

<a href="http://example.com/?action=smk_remove_post&id=1226&_nonce=7be82cd4a0" class="smk-remove-post">Remove post</a>

PHP code:

function smk_remove_post(){
    if( !empty( $_GET['action'] ) && 'smk_remove_post' == $_GET['action'] && !empty( $_GET['id'] ) ){
        if( current_user_can('edit_others_posts') && !empty($_GET['_nonce']) ){
            if( wp_verify_nonce( esc_html( $_GET['_nonce'] ), 'smk_remove_post' ) ){
                // Delete the post
                wp_delete_post( absint( $_GET['id'] ), true );
            }
        }
    }
}
add_action('parse_query', 'smk_remove_post');

function smk_remove_post_ajax(){
    wp_die( 'ok' );
}
add_action('wp_ajax_smk_remove_post', 'smk_remove_post_ajax');

Javascript:

function smk_remove_post(){
    $('.smk-remove-post').on( 'click', function( event ){
        event.preventDefault();
        var _this = $(this);

        jQuery.ajax({
            type: "GET",
            url: ajaxurl,
            data: _this.attr('href').split('?')[1],
            success: function(response){
                console.log(response); // ok
                _this.text('All great, the post is removed.');
            }
        });
    });
}
smk_remove_post();

Edit: Auch ein kleines Update des obigen Codes. Zum Verarbeiten der Abfragezeichenfolgen ist das Löschen des Site-Pfads erforderlich. Andernfalls können unerwartete Probleme auftreten. Ich habe dies zu data href hinzugefügt:

.split('?')[1]
3
Andrei Surdu

Machen Sie einen solchen Link

<a href="http://example.com/?reaction=smk_remove_post&id=1226&_nonce=7be82cd4a0" data-id="1226" data-nonce="7be82cd4a0" class="smk-remove-post">Remove post</a>

Und jQuery

$('.smk-remove-post').on( 'click', function( event ){
    event.preventDefault();
    var _this = $(this);

    var data = {
        'action': 'smk_remove_post_ajax',
        'reaction': 'smk_remove_post',
        'id': _this.data('id'),
        '_nonce': _this.data('nonce')
    };

    // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
    jQuery.ajax({
        type: "GET",
        url: ajaxurl,
        data: data,
        success: function(response){
            console.log(response);
            _this.text('All great, the post is removed.');
        }
    });
});

Siehe Codex about AJAX in Plugins . Und im Codex heißt es:

Die meiste Zeit sollten Sie wp_die () in Ihrer Ajax-Rückruffunktion verwenden. Dies bietet eine bessere Integration in WordPress und erleichtert das Testen Ihres Codes.

Verwenden Sie also wp_die(); anstelle von die();

1
Rene Korss

AJAX ist nicht magisch und wenn Sie URL X anfordern, erhalten Sie dasselbe HTML für diese URL, wenn Sie dies über die Adressleiste, den Link oder Ajax des Browsers tun. Wenn Sie eine andere Antwort wünschen, verwendet der HTML-Code, den Sie kann nicht verwenden, dieselbe URL für die Ajax-Anforderung wie im Link.

Wordpress hat einen speziellen "Endpunkt", um Ajax-Anfragen zu bearbeiten - admin-ajax.php und alle Ajax-Anfragen sollten nur an ihn gesendet werden, so etwas wie $.ajax({url:....admin-ajax.php})

Als nächstes müssen Sie WordPress mitteilen, was Sie tun möchten, und dafür gibt es einen speziellen Parameter in der Anfrage mit dem Namen action. Dieser Parameter gibt den Hook an, der auf der Serverseite zur Verarbeitung der Anforderung verwendet werden soll. Diesen Teil hast du in deinem Code richtig gemacht.

Jetzt benötigen Sie die zusätzlichen Parameter, die angeben, welches Objekt von der Operation AJAX bearbeitet oder abgerufen werden soll. Sie können beispielsweise den Permalink des Posts oder die Post-ID verwenden, aber alles hängt von der Komplexität des Vorgangs ab, den Sie ausführen möchten. In Ihrem speziellen Fall würde ich vermuten, dass eine Post-ID der beste Parameter ist, um die Anfrage zu übergeben.

Wie werden die Parameter gesendet? Die meisten Leute machen eine POST Anfrage, wenn sie AJAX machen, aber wenn Sie ein GET wollen, können Sie sie als Teil der URL übergeben (was genau das ist, was jquery für Sie tun wird). .

1
Mark Kaplun