Come inserire dati nel database in WordPress utilizzando Ajax
Pubblicato: 2021-12-30
Stai cercando un modo per inserire dati in un database in WordPress usando Ajax? Continua a leggere, poiché condivideremo i semplici passaggi che devi seguire per raggiungere questo obiettivo.
È importante notare che per implementare questa soluzione sono necessarie alcune competenze di codifica. Tuttavia, cercheremo di spiegare ogni passaggio in dettaglio per descrivere come implementare la soluzione sul tuo sito WordPress.
Ajax significa inviare dati al database o al server, senza ricaricare la pagina. Ciò garantisce che il visitatore non lasci il tuo sito Web o la pagina corrente. Inoltre, consente di risparmiare molto tempo soprattutto quando si compila un modulo di grandi dimensioni.
Entriamo subito in esso.
Riepilogo
- Crea un modulo
- Prendi tutti i dati del modulo usando JQuery e invia i dati su Ajax
- Recupera e inserisci i dati nel database
Crea un modulo
Il primo passo è creare il modulo. Quando invii il modulo tramite richiesta Ajax in WordPress, puoi inviare dati su Ajax e raggiungere la funzione all'interno del tuo tema tramite l'URL admin_url('admin-ajax.php'); per raggiungere l'amministratore in modo sicuro.
Puoi saperne di più su questo URL nella documentazione Ajax fornita da WordPress.
Per creare il modulo, copia e incolla questo codice dove vuoi visualizzarlo. Puoi visualizzarlo nel file index.php, single.php, page.php o anche 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>
Prendi tutti i dati del modulo usando JQuery e invia i dati su Ajax
In questa sezione, utilizzeremo jQuery per ottenere il risultato. In alternativa, puoi anche utilizzare JavaScript vanilla per ottenere lo stesso risultato.
Prima di procedere, ricorda di prendere nota della variabile action all'interno dell'oggetto dati all'interno della funzione $.ajax(). Questo perché useremo la funzione all'interno della funzione 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);
}
});
})
Il codice sopra garantisce che i dati vengano inviati ad Ajax, dopo aver fatto clic sul pulsante di invio. Dobbiamo recuperare i valori all'interno del functions.php del tema usando la funzione ajax di WordPress.
Recupera e inserisci i dati nel database
Innanzitutto, scriviamo la funzione Ajax di WordPress per acquisire i dati e inserirli nel database.
//Saving Ajax Data
add_action('wp_ajax_nopriv_save_post_details_form','save_enquiry_form_action');
La stringa nel codice sopra è composta da due parti principali. Sono nopriv e save_post_details_form.
La parte nopriv significa che Ajax fallirà se l'utente ha effettuato l'accesso. Tuttavia, se l'utente non ha effettuato l'accesso, il trigger Ajax funziona.
Il save_post_details_form è quello che abbiamo scritto sul codice JavaScript all'interno di $.ajax() nell'oggetto dati. Vale la pena ricordare che la funzione non funzionerà se non è abbinata correttamente.
L'altro argomento nella funzione add_action è il nome della funzione per acquisire i dati e fare tutto ciò che vogliamo.
L'ultimo passaggio consiste nel restituire l'azione true o false a seconda del risultato e visualizzarla sul 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";
}
}
È importante notare che è possibile personalizzare il messaggio per visualizzare un output diverso.
Conclusione
In questo breve post, abbiamo condiviso come inserire dati in un database in WordPress utilizzando Ajax. La condizione "se altro" nell'ultima sezione farà il trucco all'interno dell'Ajax e puoi rendere il messaggio di risultato più descrittivo.
Se non sei in grado di implementare questa soluzione, non esitare a contattarci. Se commetti un errore, puoi scomporre il tuo sito.
Ci auguriamo che questo post ti abbia aiutato a imparare come inviare i dati nel database senza ricaricare la pagina.
Articoli simili
- Come ottenere le barre laterali registrate WordPress con il ciclo Foreach
- Come visualizzare il nome della categoria in WordPress usando un esempio pratico
- Come ottenere l'accesso alle informazioni dell'utente in WordPress
- Come creare un campo casella di controllo nella pagina di pagamento di WooCommerce