Soumettre un formulaire avec une demande POST en JavaScript
En JavaScript, vous pouvez effectuer une requête POST avec les formulaires HTML. La publication est une méthode utilisée dans les formulaires HTML pour soumettre ou envoyer les données au serveur.
Soumettre un formulaire avec une demande POST en JavaScript
Le code ci-dessous vous montre comment utiliser JavaScript pour soumettre un formulaire dans une requête POST. Ici, nous allons créer une nouvelle demande de publication et envoyer l’utilisateur à la nouvelle URL myPath.
Tout d’abord, nous avons créé une fonction qui prend trois chemins d’arguments (l’URL ou le point de terminaison), des paramètres (un objet avec une paire clé-valeur), et le dernier est la méthode post que nous initialisons directement au moment de la fonction création.
Ensuite, en utilisant la méthode document.createElement(), nous allons créer un élément de formulaire et le stocker dans la variable form. Ensuite, nous allons initialiser cette form.method avec la méthode post puis form.action avec le chemin. Au final, nous ajouterons le formulaire que nous avons créé à la balise body présente à l’intérieur du DOM.
function sendData(path, parameters, method = 'post') {
const form = document.createElement('form');
form.method = method;
form.action = path;
document.body.appendChild(form);
for (const key in parameters) {
const formField = document.createElement('input');
formField.type = 'hidden';
formField.name = key;
formField.value = parameters[key];
form.appendChild(formField);
}
form.submit();
}
sendData('/myPath/', {query: 'hello world', num: '1'});
À ce stade, nous avons créé et ajouté le formulaire à l’élément body, et actuellement, le formulaire ne contient aucun élément à l’intérieur. Ainsi, pour ajouter les données à l’intérieur du formulaire, nous utiliserons l’objet parameters, que nous passons à notre fonction sendData(). Pour parcourir cet objet, nous allons utiliser une boucle for et récupérer chaque clé de l’objet.
Ensuite, nous allons créer un champ de formulaire input et le stocker dans la variable formField. Maintenant, nous allons définir son type sur hidden puisque nous ne voulons pas afficher ce formulaire à l’intérieur sur notre page Web. Enfin, nous allons initialiser les champs du formulaire paramètres name et value avec la clé et la valeur de l’objet parameters.
Puisque dans notre cas, nous passons un objet qui contient deux paires clé-valeur ; par conséquent, la boucle for durera deux fois. Après quoi, nous utiliserons la méthode submit() pour effectuer la demande de publication et envoyer l’utilisateur à un autre point de terminaison ou URL, c’est-à-dire myPath. La fonction sendData() est appelée en passant ces paramètres sendData('/myPath/', {query: 'hello world', num: '1'});.
Si vous exécutez le code ci-dessus, il effectuera une requête POST, puis vous amènera à un nouveau point de terminaison, comme indiqué ci-dessous.
Une autre façon de le faire consiste à créer l’intégralité du formulaire à l’intérieur du HTML lui-même au lieu de JavaScript. Et puis accéder à ce formulaire et à ses éléments à l’intérieur de notre code JavaScript comme suit.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="form" action="https://www.wikipedia.org/" method="POST">
<input id="formField" type="hidden" name="Director" value="James Cameron">
</form>
<script src="./script.js"></script>
</body>
</html>
function postData(path, name, value) {
document.getElementById('formField').name = name;
document.getElementById('formField').value = value;
document.getElementById('form').action = path;
document.getElementById('form').submit();
}
postData('https://www.wikipedia.org/', 'Writer', 'Jim Collins');
Ici, nous ajoutons directement la method en tant que POST au formulaire HTML lui-même. Dans notre méthode postData(), nous passons simplement le path, le name et la value en tant que postData("https://www.google.com/","Writer","Jim Collins");. Ensuite, nous accéderons au formField à l’aide de la méthode document.getElementById(), puis définirons les valeurs de manière appropriée, comme indiqué ci-dessus. Après avoir exécuté ce code, il effectuera une requête POST et dirigera l’utilisateur vers le site Web de Wikipédia, comme indiqué ci-dessous.
Le code ci-dessus fonctionne de la même manière que celui du code précédent, mais il est beaucoup plus concis et lisible.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn