Comment insérer des données dans une base de données dans WordPress en utilisant Ajax

Vous cherchez un moyen d'insérer des données dans une base de données dans WordPress en utilisant Ajax ? Lisez la suite, car nous partagerons les étapes simples que vous devez suivre pour y parvenir.

Il est important de noter que vous avez besoin de certaines compétences en codage pour mettre en œuvre cette solution. Cependant, nous essaierons d'expliquer chaque étape en détail pour décrire comment vous pouvez implémenter la solution sur votre site WordPress.

Ajax signifie envoyer des données à la base de données ou au serveur, sans recharger la page. Cela garantit que le visiteur ne quitte pas votre site Web ou la page actuelle. De plus, cela permet de gagner beaucoup de temps surtout lors du remplissage d'un formulaire volumineux.

Allons droit au but.

Résumé

• Créer un formulaire
• Récupérez toutes les données de formulaire à l'aide de JQuery et envoyez des données via Ajax
• Récupérer et insérer des données dans la base de données

Créer un formulaire

La première étape consiste à créer le formulaire. Lorsque vous soumettez le formulaire via une requête Ajax dans WordPress, vous pouvez envoyer des données via Ajax et accéder à la fonction dans votre thème via l'URL admin_url('admin-ajax.php'); pour accéder à l'administrateur en toute sécurité.

Vous pouvez en savoir plus sur cette URL dans la documentation Ajax fournie par WordPress.

Pour créer le formulaire, copiez et collez ce code là où vous souhaitez l'afficher. Vous pouvez l'afficher dans le fichier index.php, single.php, page.php ou même 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>

Récupérez toutes les données de formulaire à l'aide de JQuery et envoyez des données via Ajax

Dans cette section, nous utiliserons jQuery pour obtenir le résultat. Alternativement, vous pouvez également utiliser du JavaScript vanille pour obtenir le même résultat.

Avant de continuer, n'oubliez pas de prendre note de la variable d'action à l'intérieur de l'objet de données à l'intérieur de la fonction $.ajax(). C'est parce que nous allons utiliser la fonction à l'intérieur de la fonction 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);

}

});

})

Le code ci-dessus garantit que les données sont envoyées à Ajax, une fois que vous avez cliqué sur le bouton Soumettre. Nous devons récupérer les valeurs à l'intérieur du functions.php du thème en utilisant la fonction ajax de WordPress.

Récupérer et insérer des données dans la base de données

Tout d'abord, écrivons la fonction WordPress Ajax pour récupérer les données et les insérer dans la base de données.

//Saving Ajax Data

add_action('wp_ajax_nopriv_save_post_details_form','save_enquiry_form_action');

La chaîne dans le code ci-dessus se compose de deux parties principales. Ils sont nopriv et save_post_details_form.

La partie nopriv signifie qu'Ajax échouera si l'utilisateur est connecté. Cependant, si l'utilisateur n'est pas connecté, le déclencheur Ajax fonctionne.

Le save_post_details_form est celui que nous avons écrit sur le code JavaScript à l'intérieur du $.ajax() dans l'objet de données. Il convient de mentionner que la fonction ne fonctionnera pas si elle n'est pas correctement associée.

L'autre argument de la fonction add_action est le nom de la fonction pour récupérer les données et faire tout ce que nous voulons.

La dernière étape consiste à renvoyer l'action true ou false en fonction du résultat et à l'afficher sur le 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";

}

}

Il est important de noter que vous pouvez personnaliser le message pour afficher une sortie différente.

Conclusion

Dans ce bref article, nous avons partagé comment vous pouvez insérer des données dans une base de données dans WordPress en utilisant Ajax. La condition "if else" dans la dernière section fera l'affaire à l'intérieur de l'Ajax et vous pouvez rendre le message de résultat plus descriptif.

Si vous n'êtes pas en mesure de mettre en place cette solution, n'hésitez pas à nous contacter. Si vous faites une erreur, vous pouvez décomposer votre site.

Nous espérons que cet article vous a aidé à apprendre à soumettre des données dans la base de données sans recharger la page.

Articles similaires

1. Comment obtenir des barres latérales enregistrées WordPress avec la boucle Foreach
2. Comment afficher le nom de la catégorie dans WordPress à l'aide d'un exemple pratique
3. Comment obtenir des informations sur les utilisateurs connectés dans WordPress
4. Comment créer un champ de case à cocher dans la page de paiement WooCommerce