Ein Tutorial zur Verwendung von AJAX in WordPress

Werbung

AJAX ist eine bemerkenswerte Web-Technologie, die uns über das einfache „Klicken Sie auf den Link und wechseln Sie zu einer anderen Seite" Struktur von Das Internet 1.0.

AJAX, das steht für Asynchrones Javascript und XMLermöglicht es Websites, Inhalte dynamisch abzurufen und anzuzeigen, ohne dass sich der Benutzer von der aktuellen Seite entfernt. Dies führt zu einer weitaus interaktiveren Benutzererfahrung und kann auch die Dinge beschleunigen, da keine ganz neue Webseite geladen werden muss. Glücklicherweise ist die Verwendung von AJAX in der WordPress-Umgebung recht einfach, und heute werde ich Ihnen zeigen, wie.

Dieses Ajax-Tutorial sollte als ziemlich fortgeschritten angesehen werden und wird vom letzten Mal an fortgesetzt, wo wir gelernt haben Verwendung benutzerdefinierter Datenbanktabellen Arbeiten mit benutzerdefinierten Datenbanktabellen in WordPressEin kurzer Scan der Best of WordPress Plugins-Seite zeigt einige der vielen einzigartigen und Nischen-Möglichkeiten, wie Sie Ihr Blog härter arbeiten lassen können. Was ist, wenn Sie bereits eine Datenbank mit ...

Weiterlesen aus einer WordPress-Vorlage heraus - in meinem Beispiel wurde eine einfache vorhandene Tabelle mit Kundendaten verwendet. Wenn es jedoch darum geht, Dinge wieder in die Datenbank einzufügen, werden wir ein wenig AJAX-Magie in WordPress verwenden.

Der gesamte Code im heutigen Tutorial bezieht sich daher auf das, was wir zuletzt geschrieben haben. Wenn Sie jedoch nur nach AJAX in WordPress suchen, ist dies ebenso relevant.

Warum AJAX verwenden?

Die häufigste Verwendung von AJAX bezieht sich auf Formulare. Überprüfen Sie, ob ein Benutzername verwendet wird, oder füllen Sie den Rest des Formulars mit unterschiedlichen Fragen, je nachdem, welche Antwort Sie geben. Grundsätzlich verwenden Sie AJAX jedoch immer dann, wenn Sie ein Ereignis wünschen (wie ein Benutzer, der auf etwas klickt oder etwas eingibt) gebunden an a serverseitig Aktion, die in der auftritt Hintergrund.

Wir werden es verwenden, um neue Einträge zu unserer wichtigen benutzerdefinierten Kundendatenbanktabelle hinzuzufügen, aber Sie können sich wahrscheinlich etwas Aufregenderes einfallen lassen.

Übersicht über die Verwendung von AJAX in WordPress

1. Bearbeiten Sie Ihre benutzerdefinierte Vorlage so, dass sie ein Formular oder ein Javascript-Ereignis enthält, an das Daten über jQuery AJAX gesendet werden admin-ajax.php einschließlich der Post-Daten, die Sie weitergeben möchten. Stellen Sie sicher, dass jQuery geladen wird.
2. Definieren Sie eine Funktion in Ihrem Thema function.php; Lesen Sie die Post-Variablen und geben Sie auf Wunsch etwas an den Benutzer zurück.
3. Fügen Sie eine hinzu AJAX Action Hook für Ihre Funktion.

Formular erstellen

Beginnen wir mit der Erstellung eines einfachen Formulars im Front-End zur Eingabe neuer Kundendaten. Es ist nichts Kompliziertes. Ersetzen Sie einfach den Hauptteil Ihrer benutzerdefinierten Vorlage durch diesen Code, den wir letzte Woche begonnen haben und in dem die Prüfung is_user_logged_in () stattfindet:

if (is_user_logged_in ()):?> 

Name:Email:Telefon:Adresse:

Das einzige, was für Sie seltsam aussehen könnte, ist die Verwendung eines versteckten Eingabefelds namens Aktion - Dies enthält den Namen der Funktion, die wir über AJAX auslösen.

Der PHP-Empfänger

Als nächstes öffnen functions.php und fügen Sie die folgende Zeile hinzu, um sicherzustellen, dass jQuery auf Ihrer Site geladen wird:

wp_enqueue_script ('jquery');

Die Grundstruktur zum Schreiben eines AJAX-Aufrufs lautet wie folgt:

Funktion myFunction () { //etwas tun. sterben(); } add_action ('wp_ajax_myFunction', 'myFunction'); add_action ('wp_ajax_nopriv_myFunction', 'myFunction');

Diese letzten beiden Zeilen sind Action-Hooks, die WordPress mitteilen "Ich habe eine Funktion namens myFunction, und ich möchte, dass Sie darauf achten, da sie über die AJAX-Schnittstelle aufgerufen wird." - Die erste ist für Benutzer auf Administratorebene wp_ajax_nopriv_ ist für Benutzer, die nicht angemeldet sind. Hier ist der vollständige Code für functions.php Damit werden wir Daten in unsere spezielle Kundentabelle einfügen, die ich kurz erläutern werde:

wp_enqueue_script ('jquery'); Funktion addCustomer () {global $ wpdb; $ name = $ _POST ['name']; $ phone = $ _POST ['phone']; $ email = $ _POST ['email']; $ address = $ _POST ['address']; if ($ wpdb-> insert ('Kunden', Array ( 'name' => $ name, 'email' => $ email, 'address' => $ address, 'phone' => $ phone. )) FALSE) {echo "Error"; } sonst { Echo "Kunde '". $ Name. "'erfolgreich hinzugefügt, Zeilen-ID ist". $ wpdb-> insert_id; } sterben(); } add_action ('wp_ajax_addCustomer', 'addCustomer'); add_action ('wp_ajax_nopriv_addCustomer', 'addCustomer'); // nicht wirklich benötigt

Nach wie vor erklären wir das global $ wpdb um uns direkten Zugriff auf die Datenbank zu geben. Wir greifen dann nach dem POST Variablen, die die Formulardaten enthalten. In einer IF-Anweisung ist die Funktion umgeben $ wpdb-> einfügenHiermit fügen wir Daten in unsere Tabelle ein. Da WordPress spezielle Funktionen zum Einfügen von regulären Posts und Metadaten bietet, ist dies $ wpdb-> einfügen Die Methode wird im Allgemeinen nur für benutzerdefinierte Tabellen verwendet. Du kannst Lesen Sie mehr darüber im Codex, Grundsätzlich wird jedoch der Name der Tabelle verwendet, in die eingefügt werden soll, gefolgt von einem Array von Spalten / Wert-Paare.

Das FALSCH prüft, ob die Einfügefunktion fehlgeschlagen ist, und gibt in diesem Fall „Error“. Wenn nicht, senden wir nur eine Nachricht an den Benutzer Kunde X wurde hinzugefügtund Echo der $ wpdb-> insert_id Variable, die die angibt Auto-Inkrement-Variable der letzten Einfügeoperation, die passiert ist (Angenommen, Sie haben ein Feld festgelegt, das automatisch inkrementiert wird, z. B. eine ID.).

Schließlich, sterben() überschreibt die Standardeinstellung sterben (0) bereitgestellt von WordPress - dies ist als solches nicht unbedingt erforderlich, aber ohne es werden Sie es bekommen 0 an das Ende von allem angehängt, was Sie an die Vorlage zurücksenden.

Das Javascript

Der letzte Schritt ist das magische Bit - das eigentliche Javascript, das den AJAX-Aufruf initiiert. Sie werden feststellen, dass in dem zuvor hinzugefügten Formular das Aktionsfeld leer gelassen wurde. Dies liegt daran, dass wir dies mit unserem AJAX-Aufruf überschreiben. Der allgemeine Weg, dies zu tun, wäre:

jQuery.ajax ({Typ: "POST", URL: "/wp-admin/admin-ajax.php", // Daten unserer PHP-Handler-Datei: "myDataString", Erfolg: Funktion (Ergebnisse) {// etwas tun mit zurückgegebene Daten})};

Dies ist die Grundstruktur des AJAX-Aufrufs, den wir verwenden werden, aber sicherlich nicht die einzige Möglichkeit, dies zu tun. Sie fragen sich vielleicht, warum wir uns darauf beziehen wp-admin hier, obwohl dies am Frontend der Site sein wird. Dies ist genau dort, wo die AJAX-Handler bleibt, ob Sie es für Front- oder Admin-Funktionen verwenden - verwirrend, ich weiß. Fügen Sie den folgenden Code direkt in die Kundenvorlage ein:

In der ersten Zeile hängen wir unsere ajaxSubmit-Funktion an das zuvor erstellte Formular an. Wenn der Benutzer auf "Senden" klickt, erfolgt dies über unsere spezielle AJAX-Funktion. Ohne dies wird unsere Form nichts tun. In unserer ajaxSubmit () Funktion, das erste, was wir tun, ist zu serialize () die Form. Dies nimmt nur alle Formularwerte und verwandelt sie in eine lange Zeichenfolge, die unser PHP später analysieren wird. Wenn alles richtig läuft, werden die zurückgegebenen Daten mit der ID des Feedbacks in den DIV eingegeben.

Das ist es. Speichern Sie alles, aktualisieren Sie und versuchen Sie, einige Formulardaten zu senden. Wenn Sie Probleme haben, können Sie diese anzeigen Den vollständigen Code der Seitenvorlage finden Sie hier (basierend auf dem Standardthema 11)und den Code, den hinzugefügt werden soll functions.php hier(nicht ersetzen, nur am Ende hinzufügen).

Dinge, die Sie beachten sollten

Sicherheit: Dieser Code ist nicht produktionsbereit und dient nur zum Lernen. Wir haben einen wichtigen Punkt ausgelassen, und das ist die Verwendung von a wp-nonce - ein von WordPress generierter einmaliger Code, der sicherstellt, dass die AJAX-Anfrage nur von der Stelle kommt, an der sie beabsichtigt war; ein Schlüssel, wenn Sie so wollen. Ohne dies könnte Ihre Funktion effektiv genutzt werden, um zufällige Daten einzufügen. SQL-Injection-Angriffe sind jedoch kein Problem, da wir Abfragen über WordPress weitergeleitet haben $ wpdb-> einfügen Funktion - WordPress bereinigt alle Eingaben für Sie und macht sie sicher.

Aktualisierung der Kundentabelle: Derzeit senden wir nur eine Bestätigungsnachricht zurück, die Kundentabelle wird jedoch nicht aktualisiert. Die zusätzlichen Einträge werden nur angezeigt, wenn Sie die Seite aktualisieren (welche Art von Niederlagen den Zweck, dies alles über AJAX zu tun). Überprüfen Sie, ob Sie eine neue AJAX-Funktion erstellen können, mit der die Tabelle dynamisch ausgegeben werden kann.

Eingabevalidierung: Da die Formulardaten nicht überprüft werden, können leere Einträge oder mehrere Einträge hinzugefügt werden, wenn Sie zu oft drücken. Einige Eingabevalidierungen in den Formularfeldern, deren Löschen nach Abschluss sowie SQL zum Überprüfen der E-Mail- oder Telefonnummer, die noch nicht in der Datenbank vorhanden ist, sind hilfreich.

Das war's von mir in dieser Woche. Wenn Sie nach diesem Tutorial Probleme hatten, können Sie sich gerne über die Kommentare an uns wenden. Ich werde mein Bestes tun, um Ihnen zu helfen. oder wenn Sie versuchen, dies auf irgendeine Weise anzupassen, können Sie mir gerne Ideen mitteilen. Ich hoffe, dies zeigt wirklich, wie viel Sie in WordPress tun können, indem Sie einfach ein wenig JavaScript, PHP und MySQL kombinieren. Vergessen Sie nach wie vor nicht, alle anderen zu überprüfen WordPress-Artikel.