Cum să inserați date în baza de date în WordPress folosind Ajax
Publicat: 2021-12-30
Căutați o modalitate de a insera date într-o bază de date în WordPress folosind Ajax? Citiți mai departe, deoarece vă vom împărtăși pașii simpli pe care trebuie să-i urmați pentru a realiza acest lucru.
Este important să rețineți că aveți nevoie de anumite abilități de codare pentru a implementa această soluție. Cu toate acestea, vom încerca să explicăm fiecare pas în detaliu pentru a descrie modul în care puteți implementa soluția pe site-ul dvs. WordPress.
Ajax înseamnă trimiterea de date către baza de date sau server, fără a reîncărca pagina. Acest lucru asigură că vizitatorul nu părăsește site-ul dvs. sau pagina curentă. În plus, economisește mult timp mai ales atunci când completezi un formular mare.
Să intrăm direct în asta.
rezumat
- Creați un formular
- Luați toate datele din formular folosind JQuery și trimiteți date prin Ajax
- Preluați și inserați date în baza de date
Creați un formular
Primul pas este crearea formularului. Când trimiteți formularul prin cererea Ajax în WordPress, puteți trimite date prin Ajax și puteți ajunge la funcția din cadrul temei dvs. prin adresa URL admin_url('admin-ajax.php'); pentru a ajunge în siguranță la administrator.
Puteți afla mai multe despre această adresă URL în documentația Ajax furnizată de WordPress.
Pentru a crea formularul, copiați și inserați acest cod acolo unde doriți să-l afișați. Îl puteți afișa în fișierul index.php, single.php, page.php sau chiar 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>
Luați toate datele din formular folosind JQuery și trimiteți date prin Ajax
În această secțiune, vom folosi jQuery pentru a obține rezultatul. Alternativ, puteți utiliza și JavaScript vanilla pentru a obține același rezultat.
Înainte de a continua, nu uitați să luați notă de variabila acțiune din interiorul obiectului de date din funcția $.ajax(). Acest lucru se datorează faptului că vom folosi funcția în interiorul funcției 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);
}
});
})
Codul de mai sus asigură că datele sunt trimise către Ajax, odată ce faceți clic pe butonul de trimitere. Trebuie să obținem valorile din funcțiile.php ale temei folosind funcția ajax a WordPress.
Preluați și inserați date în baza de date
Mai întâi, să scriem funcția WordPress Ajax pentru a prelua datele și a le introduce în baza de date.
//Saving Ajax Data
add_action('wp_ajax_nopriv_save_post_details_form','save_enquiry_form_action');
Șirul din codul de mai sus este format din două părți principale. Sunt nopriv și save_post_details_form.
Partea nopriv înseamnă că Ajax va eșua dacă utilizatorul este conectat. Cu toate acestea, dacă utilizatorul nu este conectat, declanșatorul Ajax funcționează.
Formul save_post_details_form este cel pe care l-am scris pe codul JavaScript în interiorul $.ajax() din obiectul de date. Este demn de menționat că funcția nu va funcționa dacă nu este potrivită corect.
Celălalt argument din funcția add_action este numele funcției pentru a prelua datele și a face tot ce vrem.
Ultimul pas este să returnezi acțiunea adevărată sau falsă în funcție de rezultat și să o afișezi pe front-end.
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";
}
}
Este important să rețineți că puteți personaliza mesajul pentru a afișa o ieșire diferită.
Concluzie
În această scurtă postare, am împărtășit cum puteți insera date într-o bază de date în WordPress folosind Ajax. Condiția „dacă altfel” din ultima secțiune va face truc în interiorul Ajax și puteți face mesajul rezultatului mai descriptiv.
Dacă nu reușiți să implementați această soluție, nu ezitați să ne contactați. Dacă faceți vreo greșeală, vă puteți distruge site-ul.
Sperăm că această postare te-a ajutat să înveți cum să trimiți date în baza de date fără a reîncărca pagina.
Articole similare
- Cum să obțineți bare laterale înregistrate WordPress cu bucla Foreach
- Cum să afișați numele categoriei în WordPress folosind un exemplu practic
- Cum să vă conectați Informații despre utilizator în WordPress
- Cum se creează un câmp de casetă de selectare în pagina de plată WooCommerce