So fügen Sie Daten in die Datenbank in WordPress mit Ajax ein
Veröffentlicht: 2021-12-30
Suchen Sie nach einer Möglichkeit, Daten mit Ajax in eine Datenbank in WordPress einzufügen? Lesen Sie weiter, denn wir werden Ihnen die einfachen Schritte mitteilen, die Sie befolgen müssen, um dies zu erreichen.
Es ist wichtig zu beachten, dass Sie einige Programmierkenntnisse benötigen, um diese Lösung zu implementieren. Wir werden jedoch versuchen, jeden Schritt im Detail zu erklären, um zu beschreiben, wie Sie die Lösung auf Ihrer WordPress-Seite implementieren können.
Ajax bedeutet, Daten an die Datenbank oder den Server zu senden, ohne die Seite neu zu laden. Dadurch wird sichergestellt, dass der Besucher Ihre Website oder die aktuelle Seite nicht verlässt. Außerdem spart es vor allem beim Ausfüllen eines großen Formulars viel Zeit.
Lassen Sie uns direkt darauf eingehen.
Zusammenfassung
- Erstellen Sie ein Formular
- Holen Sie sich alle Formulardaten mit JQuery und senden Sie Daten über Ajax
- Abrufen und Einfügen von Daten in die Datenbank
Erstellen Sie ein Formular
Der erste Schritt besteht darin, das Formular zu erstellen. Wenn Sie das Formular über eine Ajax-Anfrage in WordPress senden, können Sie Daten über Ajax senden und die Funktion in Ihrem Design über die URL admin_url('admin-ajax.php') erreichen; um den Admin sicher zu erreichen.
Weitere Informationen zu dieser URL finden Sie in der von WordPress bereitgestellten Ajax-Dokumentation.
Um das Formular zu erstellen, kopieren Sie diesen Code und fügen Sie ihn dort ein, wo Sie ihn anzeigen möchten. Sie können es in den Dateien index.php, single.php, page.php oder sogar sidebar.php anzeigen.
<div class="container">
<h1>WordPress AJAX Insert Post Demo</h1>
<form id="enquiry_email_form" action="#" method="POST" data-url="<?php echo admin_url('admin-ajax.php'); ?>" enctype="multipart/form-data">
<div class="form-group">
<label for="">Enter Title</label>
<input type="text" class="form-control" name="post_title" id="post_title" placeholder="Enter Title" />
</div>
<div class="form-group">
<label for="">Enter Description</label>
<textarea name="post_description" id="post_description" cols="30" rows="10" class="form-control" placeholder="Enter Post Description"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-pencil"></i> Submit</button>
</div>
</form>
</div>
Holen Sie sich alle Formulardaten mit JQuery und senden Sie Daten über Ajax
In diesem Abschnitt verwenden wir jQuery, um das Ergebnis zu erzielen. Alternativ können Sie auch Vanille-JavaScript verwenden, um dasselbe Ergebnis zu erzielen.
Bevor Sie fortfahren, denken Sie daran, die Aktionsvariable im Datenobjekt in der Funktion $.ajax() zu beachten. Dies liegt daran, dass wir die Funktion innerhalb der Ajax-Funktion verwenden werden.
$("#enquiry_email_form").on("submit", function (event) {
event.preventDefault();
var form= $(this);
var ajaxurl = form.data("url");
var detail_info = {
post_title: form.find("#post_title").val(),
post_description: form.find("#post_description").val()
}
if(detail_info.post_title === "" || detail_info.post_description === "") {
alert("Fields cannot be blank");
return;
}
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
post_details : detail_info,
action: 'save_post_details_form' // this is going to be used inside wordpress functions.php
},
error: function(error) {
alert("Insert Failed" + error);
},
success: function(response) {
alert("Insert Success" + response);
}
});
})
Der obige Code stellt sicher, dass die Daten an Ajax gesendet werden, sobald Sie auf die Schaltfläche „Senden“ klicken. Wir müssen die Werte in der functions.php des Themes mit der Ajax-Funktion von WordPress abrufen.
Abrufen und Einfügen von Daten in die Datenbank
Lassen Sie uns zunächst die WordPress-Ajax-Funktion schreiben, um die Daten zu erfassen und in die Datenbank einzufügen.
//Saving Ajax Data
add_action('wp_ajax_nopriv_save_post_details_form','save_enquiry_form_action');
Die Zeichenfolge im obigen Code besteht aus zwei Hauptteilen. Sie sind nopriv und save_post_details_form.
Der nopriv-Teil bedeutet, dass Ajax fehlschlägt, wenn der Benutzer angemeldet ist. Wenn der Benutzer jedoch nicht angemeldet ist, funktioniert der Ajax-Trigger.
Das save_post_details_form ist das, was wir im JavaScript-Code innerhalb von $.ajax() im Datenobjekt geschrieben haben. Es ist erwähnenswert, dass die Funktion nicht funktioniert, wenn sie nicht richtig angepasst ist.
Das andere Argument in der add_action-Funktion ist der Name der Funktion, um die Daten zu erfassen und alles zu tun, was wir wollen.
Der letzte Schritt besteht darin, je nach Ergebnis die Aktion wahr oder falsch zurückzugeben und im Frontend anzuzeigen.
function save_enquiry_form_action() {
$post_title = $_POST['post_details']['post_title'];
$post_description = $_POST['post_details']['post_description'];
$args = [
'post_title'=> $post_title,
'post_content'=>$post_description,
'post_status'=> 'publish',
'post_type'=>post',
'post_date'=> get_the_date()
];
$is_post_inserted = wp_insert_post($args);
if($is_post_inserted) {
return "success";
} else {
return "failed";
}
}
Es ist wichtig zu beachten, dass Sie die Nachricht anpassen können, um eine andere Ausgabe anzuzeigen.
Fazit
In diesem kurzen Beitrag haben wir geteilt, wie Sie mit Ajax Daten in eine Datenbank in WordPress einfügen können. Die „if else“-Bedingung im letzten Abschnitt wird innerhalb des Ajax funktionieren und Sie können die Ergebnisnachricht aussagekräftiger gestalten.
Wenn Sie diese Lösung nicht implementieren können, können Sie sich gerne an uns wenden. Wenn Sie einen Fehler machen, können Sie Ihre Website aufschlüsseln.
Wir hoffen, dass dieser Beitrag Ihnen geholfen hat, zu lernen, wie Sie Daten in die Datenbank übermitteln, ohne die Seite neu zu laden.
Ähnliche Artikel
- So erhalten Sie registrierte Seitenleisten WordPress mit Foreach-Schleife
- So zeigen Sie Kategorienamen in WordPress anhand eines praktischen Beispiels an
- So erhalten Sie eingeloggte Benutzerinformationen in WordPress
- So erstellen Sie ein Kontrollkästchenfeld auf der WooCommerce-Checkout-Seite