Ein Tutorial zur Verwendung von AJAX in WordPress

AJAX ist eine bemerkenswerte Web-Technologie, die uns über das Einfache hinausführt “Klicken Sie auf den Link, um zu einer anderen Seite zu gelangen” Struktur von Das Internet 1.0.

AJAX, was für steht Asynchrones Javascript und XML, ermöglicht Websites das dynamische Abrufen und Anzeigen von Inhalten, ohne dass der Benutzer sich von der aktuellen Seite entfernt. Dies führt zu einer viel interaktiveren Benutzererfahrung und kann auch die Dinge beschleunigen, da keine neue Webseite geladen werden muss. Glücklicherweise ist die Verwendung von AJAX aus der WordPress-Umgebung heraus ziemlich einfach. Heute zeige ich Ihnen, wie das geht.

Dieses Ajax-Tutorial sollte als ziemlich fortgeschritten betrachtet werden und setzt sich seit dem letzten Mal fort, wo wir gelernt haben, wie man benutzerdefinierte Datenbanktabellen verwendet. Mit benutzerdefinierten Datenbanktabellen in WordPress arbeiten Mit benutzerdefinierten Datenbanktabellen in WordPress arbeiten Ein kurzer Scan der Seite "Best of WordPress Plugins" wird angezeigt Einige der vielen einzigartigen und Nischenmöglichkeiten, mit denen Sie Ihren Blog härter arbeiten lassen können. Was ist, wenn Sie bereits eine Datenbank mit… Lesen Sie mehr aus einer WordPress-Vorlage - in meinem Beispiel wurde eine einfache vorhandene Tabelle mit Kundendaten verwendet. Beim Einfügen von Dingen in die Datenbank werden wir jedoch ein wenig AJAX-Zauber in WordPress einsetzen.

Der gesamte Code im heutigen Tutorial bezieht sich daher auf das, was wir beim letzten Mal geschrieben haben. Wenn Sie jedoch nur nach AJAX in WordPress suchen, ist es genauso relevant.

Warum AJAX verwenden??

Die häufigste Verwendung von AJAX bezieht sich auf Formulare. Dabei wird geprüft, ob ein Benutzername verwendet wird, oder der Rest des Formulars wird mit verschiedenen Fragen gefüllt, abhängig von der jeweiligen Antwort. Grundsätzlich verwenden Sie AJAX jedoch immer dann, wenn Sie ein Ereignis wünschen (wie ein Benutzer etwas anklickt oder etwas eingibt) gebunden an a serverseitig Aktion, die in der auftritt Hintergrund.

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

Überblick ü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 übermittelt werden admin-ajax.php 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 dem Benutzer etwas zurück, wenn Sie möchten.
3. Fügen Sie eine hinzu AJAX-Aktionshaken für deine Funktion.

Das Formular erstellen

Beginnen wir mit der Erstellung eines einfachen Formulars im Frontend 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. Dabei findet die Überprüfung is_user_logged_in () statt:

if (is_user_logged_in ()):?> 
 Name:  Email:  Telefon:  Adresse:    
 

 
 

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

Der PHP-Empfänger

Als nächstes aufmachen Functions.php Fügen Sie die folgende Zeile hinzu, um sicherzustellen, dass jQuery auf Ihrer Site geladen wird:

wp_enqueue_script ('jquery');

Die grundlegende Struktur zum Schreiben eines AJAX-Aufrufs lautet wie folgt:

function myFunction () // etwas tun die ();  add_action ('wp_ajax_myFunction', 'myFunction'); add_action ('wp_ajax_nopriv_myFunction', 'myFunction');

Die letzten beiden Zeilen sind Action-Hooks, die WordPress mitteilen “Ich habe eine Funktion namens myFunction und möchte, dass Sie darauf achten, da sie über die AJAX-Schnittstelle aufgerufen wird” - Die erste ist für Benutzer mit Administratorrechten, während wp_ajax_nopriv_ ist für Benutzer, die nicht angemeldet sind. Hier ist der vollständige Code für Functions.php die wir verwenden werden, um Daten in unsere spezielle Kundentabelle einzufügen, die ich in Kürze erläutern werde:

wp_enqueue_script ('jquery'); function 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 "Fehler";  else 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 gebraucht

Wie vorher erklären wir das global $ wpdb um uns direkten Zugriff auf die Datenbank zu gewähren. Dann packen wir die POST Variablen, die die Formulardaten enthalten. In einer IF-Anweisung befindet sich die Funktion $ wpdb-> einfügen, Das ist, was wir verwenden, um Daten in unsere Tabelle einzufügen. Da WordPress spezifische Funktionen zum Einfügen regulärer Posts und Metadaten bietet, ist dies möglich $ wpdb-> einfügen Die Methode wird im Allgemeinen nur für benutzerdefinierte Tabellen verwendet. Sie können mehr darüber im Codex nachlesen, aber im Grunde genommen ist der Name der Tabelle, 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 wenn ja, wird sie ausgegeben “Error“. Wenn nicht, senden wir dem Benutzer nur eine Nachricht Kunde X wurde hinzugefügt, und das Echo der $ wpdb-> insert_id Variable, die das angibt Auto-Inkrement-Variable der letzten Insert-Operation, die passiert ist (vorausgesetzt, Sie haben ein Feld festgelegt, das wie eine ID automatisch inkrementiert wird).

Endlich, sterben() wird die Standardeinstellung überschreiben sterben (0) bereitgestellt von WordPress - das ist an sich nicht unbedingt notwendig, aber ohne es zu bekommen 0 an das Ende von allem angehängt, das Sie an die Vorlage zurücksenden.

Das Javascript

Der letzte Schritt ist das magische Bit - das eigentliche Javascript, das den AJAX-Aufruf einleitet. Sie werden feststellen, dass das Aktionsfeld in dem zuvor hinzugefügten Formular leer war. Das liegt daran, dass wir dies mit unserem AJAX-Aufruf außer Kraft setzen. Der allgemeine Weg dazu wäre:

jQuery.ajax (type: "POST", URL: "/wp-admin/admin-ajax.php"), // unsere PHP-Handler-Dateidaten: "myDataString", success: function (results) // etwas mit zurückgegebene Daten);

Dies ist die grundlegende Struktur des AJAX-Anrufs, den wir verwenden werden, aber sicherlich nicht der einzige Weg, auf dem Sie dies tun können. Sie fragen sich vielleicht, warum wir uns damit befassen wp-admin hier, obwohl dies auf der Vorderseite der Website sein wird. Dies ist nur wo AJAX-Handler Ob Sie es für Front- oder Admin-seitige Funktionen verwenden - verwirrend, weiß ich. Fügen Sie den folgenden Code direkt in die Kundenvorlage ein:

In der ersten Zeile fügen wir unsere ajaxSubmit-Funktion an das zuvor erstellte Formular an. Wenn der Benutzer auf "Senden" klickt, wird dies über unsere spezielle AJAX-Funktion ausgeführt. Ohne dieses wird unsere Form nichts tun. In unserer ajaxSubmit () Funktion, ist das erste, was wir tun, das Formular serialisieren (). Dies nimmt nur alle Formwerte und macht sie zu einer langen Zeichenfolge, die unser PHP später auslesen wird. Wenn alles klappt, legen wir die zurückgegebenen Daten mit der ID des Feedbacks in der DIV ab.

Das ist es. Speichern Sie alles, aktualisieren Sie und senden Sie einige Formulardaten. Bei Problemen können Sie hier den vollständigen Code der Seitenvorlage anzeigen (basierend auf dem Standardthema von elf-elf), und den Code, den Sie hier hinzufügen können (nicht ersetzen, nur am Ende hinzufügen).

Dinge, die zu beachten sind

Sicherheit: Dieser Code ist nicht produktionsbereit und dient nur zum Lernen. Wir haben einen wichtigen Punkt ausgelassen, und das ist die Verwendung eines WP-Nonce - eines einmaligen Codes, der von WordPress generiert wird und der sicherstellt, dass die AJAX-Anfrage nur dort kommt, wo sie beabsichtigt war. einen Schlüssel, wenn Sie so wollen. Ohne diese Funktion könnte Ihre Funktion effektiv zum Einfügen von Zufallsdaten genutzt werden. SQL-Injection-Angriffe sind jedoch kein Problem, da Abfragen über WordPress weitergeleitet wurden $ wpdb-> einfügen Funktion - WordPress reinigt alle Eingaben für Sie und macht sie sicher.

Aktualisierung der Kundentabelle: Im Moment senden wir nur eine Bestätigungsnachricht zurück, aber die Kundentabelle wird nicht aktualisiert - Sie sehen nur die zusätzlichen Einträge, wenn Sie die Seite aktualisieren (welche Art von Zweck besiegt den Zweck, dies alles über AJAX zu tun). Prüfen Sie, ob Sie eine neue AJAX-Funktion erstellen können, die die Tabelle dynamisch ausgeben kann.

Eingabevalidierung: Da die Formulardaten nicht geprüft werden, ist es tatsächlich möglich, leere Einträge oder mehrere Einträge hinzuzufügen, 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 nicht bereits in der Datenbank vorhanden ist, wären nützlich.

Das war es diese Woche für mich. Wenn Sie nach diesem Tutorial Probleme hatten, können Sie sich gerne über die Kommentare in Verbindung setzen, und ich werde mein Bestes tun, um Ihnen zu helfen. oder wenn Sie versuchen, dies in irgendeiner Weise anzupassen, können Sie mir gerne Ideen einfallen lassen. Ich hoffe, dass dies wirklich zeigt, wie viel Sie mit WordPress tun können, indem Sie einfach ein wenig JavaScript, PHP und MySQL kombinieren. Vergessen Sie nicht, alle anderen WordPress-Artikel zu lesen.

Erfahren Sie mehr über: Programmierung, Webmaster-Tools, Wordpress.