Jak wstawić dane do bazy danych w WordPress za pomocą Ajax
Opublikowany: 2021-12-30
Szukasz sposobu na wstawienie danych do bazy danych w WordPressie za pomocą Ajax? Czytaj dalej, ponieważ podzielimy się prostymi krokami, które musisz wykonać, aby to osiągnąć.
Należy pamiętać, że do wdrożenia tego rozwiązania potrzebne są pewne umiejętności kodowania. Postaramy się jednak szczegółowo wyjaśnić każdy krok, aby opisać, w jaki sposób możesz wdrożyć rozwiązanie na swojej witrynie WordPress.
Ajax oznacza wysyłanie danych do bazy danych lub serwera, bez przeładowywania strony. Gwarantuje to, że odwiedzający nie opuści Twojej witryny ani bieżącej strony. Dodatkowo oszczędza dużo czasu zwłaszcza przy wypełnianiu dużego formularza.
Przejdźmy od razu.
Streszczenie
- Utwórz formularz
- Pobierz wszystkie dane formularza za pomocą JQuery i wyślij dane przez Ajax
- Pobierz i wstaw dane do bazy danych
Utwórz formularz
Pierwszym krokiem jest stworzenie formularza. Przesyłając formularz za pomocą żądania Ajax w WordPress, możesz wysłać dane przez Ajax i dotrzeć do funkcji wewnątrz motywu poprzez adres URL admin_url('admin-ajax.php'); aby bezpiecznie skontaktować się z administratorem.
Możesz dowiedzieć się więcej o tym adresie URL w dokumentacji Ajax dostarczonej przez WordPress.
Aby utworzyć formularz, skopiuj i wklej ten kod w miejscu, w którym chcesz go wyświetlić. Możesz wyświetlić go w pliku index.php, single.php, page.php, a nawet sidebar.php.
<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>
Pobierz wszystkie dane formularza za pomocą JQuery i wyślij dane przez Ajax
W tej sekcji będziemy używać jQuery do osiągnięcia wyniku. Alternatywnie możesz również użyć waniliowego JavaScript, aby osiągnąć ten sam wynik.
Zanim przejdziesz dalej, pamiętaj, aby zwrócić uwagę na zmienną akcji wewnątrz obiektu danych w funkcji $.ajax(). Dzieje się tak, ponieważ użyjemy funkcji wewnątrz funkcji Ajax.
$("#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);
}
});
})
Powyższy kod zapewnia, że dane są przesyłane do Ajax po kliknięciu przycisku przesyłania. Musimy pobrać wartości z pliku functions.php motywu za pomocą funkcji ajax WordPressa.
Pobierz i wstaw dane do bazy danych
Najpierw napiszmy funkcję WordPress Ajax, która pobierze dane i wstawi je do bazy danych.
//Saving Ajax Data
add_action('wp_ajax_nopriv_save_post_details_form','save_enquiry_form_action');
Łańcuch w powyższym kodzie składa się z dwóch głównych części. Są to nopriv i save_post_details_form.
Część nopriv oznacza, że Ajax zawiedzie, jeśli użytkownik jest zalogowany. Jednakże, jeśli użytkownik nie jest zalogowany, wyzwalacz Ajax działa.
Save_post_details_form to kod, który napisaliśmy w kodzie JavaScript wewnątrz $.ajax() w obiekcie danych. Warto wspomnieć, że funkcja nie zadziała, jeśli nie zostanie odpowiednio dobrana.
Drugim argumentem w funkcji add_action jest nazwa funkcji, która pobiera dane i robi wszystko, co chcemy.
Ostatnim krokiem jest zwrócenie akcji true lub false w zależności od wyniku i wyświetlenie jej na interfejsie użytkownika.
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";
}
}
Należy pamiętać, że można dostosować komunikat, aby wyświetlał inne dane wyjściowe.
Wniosek
W tym krótkim poście udostępniliśmy, w jaki sposób możesz wstawiać dane do bazy danych w WordPressie za pomocą Ajax. Warunek 'if else' w ostatniej sekcji załatwi sprawę wewnątrz Ajax i możesz sprawić, że komunikat wynikowy będzie bardziej opisowy.
Jeśli nie jesteś w stanie wdrożyć tego rozwiązania, skontaktuj się z nami. Jeśli popełnisz jakiś błąd, możesz zepsuć swoją witrynę.
Mamy nadzieję, że ten post pomógł Ci nauczyć się umieszczać dane w bazie danych bez przeładowywania strony.
Podobne artykuły
- Jak uzyskać zarejestrowane paski boczne WordPress z pętlą Foreach
- Jak wyświetlić nazwę kategorii w WordPress za pomocą praktycznego przykładu?
- Jak się zalogować do informacji o użytkowniku w WordPressie
- Jak utworzyć pole wyboru na stronie kasy WooCommerce