Exemple d'appel WordPress Ajax [Exemple JS de base et React]
Publié: 2021-04-04
Si vous recherchez un exemple d'appel WordPress Ajax rapide et simple, je vais rapidement vous montrer l'un des exemples que j'ai récemment utilisés dans un projet WordPress de réaction. Je suppose que si vous recherchez un exemple d'appel WordPress Ajax, vous savez déjà comment fonctionne Ajax.
Ajax J avaScript A synchrone et X ML
Si vous n'êtes pas familier; AJAX = A synchronous J avaScript A nd X ML est une bibliothèque qui permet de faire des requêtes ou de poster sur un serveur des données.
La requête AJAX peut être un GET ou POST vers une URL comme l'URL d'administration WordPress ou toute autre URL. Vous pouvez ajouter des paramètres personnalisés aux données et les manipuler selon vos besoins.
La requête AJAX dans WordPress est essentiellement utilisée pour transférer les données entre le client et le serveur sans recharger ni rafraîchir la page.
Exemple d'appel WordPress Ajax
Prenons par exemple dans ma récente application WordPress de réaction, je dois publier les données du formulaire ci-dessous sur un serveur et créer un type de publication personnalisé.
Pour envoyer ces données, nous devons savoir comment fonctionne WordPress Ajax et puisque nous sommes sur le front-end, nous devons avoir deux fichiers
- Fichier JavaScript où nous allons écrire l'exemple d'appel WordPress Ajax
- Fichier PHP qui aura pour fonction de recevoir les données et de les traiter.
Donc, fondamentalement, ici, nous ne faisons que des choses de remorquage ; obtenir les données du formulaire à l'aide de JavaScript et envoyer le formulaire au serveur. Nous pouvons ensuite traiter les données à l'intérieur de la fonction php qui
Exemple d'appel Ajax WordPress d'action côté client
Côté client, voici l'extrait de code qui devrait se trouver dans votre fichier JavaScript
$(document).on("click", ".submit-button", function (e) {
e.preventDefault();
var fd = new FormData($('#form-id');
fd.append( "action", 'example_function_to_process_data');
$.ajax({
type: 'POST',
url: object_handle.ajax_url, //defined with wp_localize function
data: fd,
success: function(data, textStatus, XMLHttpRequest) {
console.log(data);
},
error: function(MLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown);
}
});
});
Sever Side Action WordPress Ajax Call Example
Côté serveur, nous voulons simplement créer la fonction que nous avons déclarée comme action "action", 'example_function_to_process_data' et l'utiliser pour traiter les données que nous avons reçues du poste d'appel Ajax.
Dans ce cas, nous devons utiliser les deux crochets utilisés pour le frontal Ajax et les noms doivent être dans le même modèle, en particulier les crochets de la fonction de rappel peuvent avoir des noms différents :
add_action( 'wp_ajax_example_function_to_process_data', 'example_function_to_process_data_request' ); add_action( 'wp_ajax_nopriv_example_function_to_process_data', 'example_function_to_process_data_request' );
Notez comment je viens de préfixer les crochets wp_ajax_ et wp_ajax_nopriv_ avec l'action que nous avons déclarée dans le fichier JS - "action", 'example_function_to_process_data' . C'est l'astuce pour que cela fonctionne et vous ne devez pas négliger cette partie.
Exemple d'appel WordPress Ajax Fonction de rappel
Nous pouvons maintenant créer la fonction de rappel et traiter les données :
function example_function_to_process_data_request() {
$name = isset($_POST['name'])?trim($_POST['name']):"";
$response = array();
$response['message'] = "Ajax Call WordPress Example Successful Request";
echo json_encode($response);
exit;
}
Cette fonction enregistrera le message dans la console et vous verrez que vous avez réussi l'appel WordPress Ajax.
Exemple d'appel WordPress Ajax React JS
dans mon projet récent, comme je l'ai mentionné précédemment, j'ai effectué l'appel Ajax en utilisant Axios dans React JS et l'application WordPress. Dans la réaction compétente, ce qui suit était mon code
import { Component } from 'react';
import './App.css';
import axios from 'axios';
class App extends Component {
render() {
return (
<div className="App">
<ContactForm />
</div>
);
}
}
class ContactForm extends Component{
constructor(props) {
super(props);
this.state = {
name: '',
email: '',
country: '',
city: '',
job: '',
}
}
handleFormSubmit( event ) {
event.preventDefault();
const reactAppData = window.wpRoomDesigner || {}
const { ajax_url} = reactAppData
let formData = new FormData();
formData.append('action', 'processAxioData');
formData.append('name', this.state.name)
formData.append('email', this.state.email)
formData.append('city', this.state.city)
formData.append('country', this.state.country)
formData.append('job', this.state.job)
// console.log(this.state);
/* Logging Form Data
for (var key of formData.entries()) {
console.log(key[0] + ', ' + key[1]);
} */
axios.post(ajax_url, formData).then(function(response){
console.log(response.data);
})
}
render(){
return(
<form>
<label>Name</label>
<input type="text" name="name" value={this.state.name}
onChange={e => this.setState({ name: e.target.value })}/>
<label>Email</label>
<input type="email" name="email" value={this.state.email}
onChange={e => this.setState({ email: e.target.value })}/>
<label>Country</label>
<input type="text" name="country" value={this.state.country}
onChange={e => this.setState({ country: e.target.value })}/>
<label>City</label>
<input type="text" name="city" value={this.state.city}
onChange={e => this.setState({ city: e.target.value })}/>
<label>Job</label>
<input type="text" name="job" value={this.state.job}
onChange={e => this.setState({ job: e.target.value })}/>
<input type="submit" onClick={e => this.handleFormSubmit(e)} value="Create Contact" />
</form>
);
}
}
export default App;
Ici, il y a 3 éléments clés à retenir, vous pouvez voir que j'utilise l'objet FormData, vous devez déclarer l'action qui est le nom de la fonction que vous utiliserez côté serveur PHP.
Vous devez également déclarer l' ajax_url que vous pouvez utiliser la fonction wp_localize_script() et enfin vous devez transmettre les données du formulaire.
Conclusion
Dans cet article, nous avons examiné l'exemple d'appel WordPress Ajax et décrit comment vous pouvez effectuer le même appel dans une application de réaction WordPress. J'espère que cela vous aidera à démarrer avec les appels Ajax dans WordPress. Si vous avez des questions spécifiques pour un développeur WordPress, n'hésitez pas à nous contacter. Vous pouvez également contacter si vous recherchez un développeur de réaction WordPress.