Senden von WordPress-Objekten über AJAX mit reinem Javascript

Lesezeit: 3 Minuten

Ich arbeite in WordPress und versuche, meine jQuery-Funktionen durch reines Javascript zu ersetzen. Allerdings bereiten mir die Ajax-Aufrufe Probleme. Hier ist mein erfolgreiches jQuery und mein erfolgloses JavaScript:

Ursprüngliche JQuery

jQuery.ajax({
  url: locals.ajax_url,
  method: 'post',
  context: this,
  data: {
    action: 'get_more_posts',
    page: page,
    loop: typeof loop !== 'undefined' ? loop : locals.wp_query
  }
});

Neues JavaScript

var req = new XMLHttpRequest();
req.open('POST', locals.ajax_url, true);
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
var l = typeof loop !== 'undefined' ? loop: locals.wp_query;
var s="action=get_more_posts&page=" + page + '&loop=' + encodeURIComponent(JSON.stringify(l));
req.send(s);

Die jQuery funktioniert, aber das Javascript behandelt die Loop-Variable nicht richtig (Variable “l”).

Die jQuery sendet eine HTTP-Anforderung mit etwa der folgenden:

action=get_more_posts&page=2&loop%5Bquery%5D%5Bpage%5D=&loop%5Bquery%5D%5Bpagename%5D=blog&loop%5Bquery_vars%5D%5Bpage%5D=0&loop%5Bquery_vars%5D%5Bpagename%5D=blog&loop%5Bquery_vars%5D%5Berror%5

Aber die Javascript-Version sendet so etwas:

action=get_more_posts&page=2&loop=%7B%22query%22%3A%7B%22page%22%3A%22%22%2C%22pagename%22%3A%22blog%22%7D%2C%22query_vars%22%3A%7B%22page%22%3A0%2C%22pagename%22%3A%22blog%22%2C%22error

Die jQuery sendet also eckige Klammern, während das Javascript (unter anderem) verschnörkelte Klammern sendet.

Ich weiß, dass es mehrere Ansätze gibt, dies zu beheben, aber ich kann keinen davon zum Laufen bringen. Ich würde gerne den Anforderungsheader in “application/json” ändern, aber dann kann ich WordPress nicht dazu bringen, die anderen Variablen (Aktion, Seite) zu erkennen. Andernfalls brauche ich nur die Schleifenvariable, um richtig zu codieren/decodieren.

Hier ist die Variable, falls das hilft:

<script>var loop = <?= json_encode($loop); ?>;</script>

Hier ist die PHP-Funktion, falls das hilft (funktioniert mit der jQuery-Version):

function get_more_posts() {
  $args = $_REQUEST['loop']['query'];
  $args['paged'] = $_REQUEST['page'];
  $loop = new WP_Query($args);
  ...
}

Ich bin mir nicht sicher, ob ich Änderungen in PHP oder Javascript vornehmen muss, aber die Antworten können keine externen Bibliotheken beinhalten, und denken Sie daran, dass ich mit WordPress arbeite. Lassen Sie mich wissen, wenn Sie weitere Informationen benötigen. Danke im Voraus.

  • Mein Ajax ist ein wenig eingerostet, aber sollte Ihre Anfrage nicht ein ‘GET’ anstelle von ‘POST’ sein, wenn Sie eine Abfragezeichenfolge senden?

    – Greg Burkett

    3. Juli 2017 um 3:00 Uhr

  • Ich versuche nur zu replizieren, was die jquery sendet.

    – Reis_Crisp

    3. Juli 2017 um 14:46 Uhr

  • warum Sie jQuery durch JS ersetzen

    – Gnanasekaran Loganathan

    3. Juli 2017 um 15:14 Uhr

  • Damit ich die jquery-Bibliothek nicht laden muss? Was macht es aus?

    – Reis_Crisp

    3. Juli 2017 um 15:26 Uhr

Herausgefunden. Ich habe die Anfrage nicht richtig analysiert. Ich musste Stripslashes hinzufügen, und dann fehlte mir das zweite Argument für json_decode, um Arrays anstelle von Objekten zurückzugeben.

function get_more_posts() {
  $loop = json_decode(stripslashes($_REQUEST['loop']), true);
  $args = $loop['query'];
  $args['paged'] = $_REQUEST['page'];
  $loop = new WP_Query($args);
  ...
}

Hoffe, das hilft, wenn jemand anderes etwas Ähnliches versucht.

1226990cookie-checkSenden von WordPress-Objekten über AJAX mit reinem Javascript

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy