JavaScript POST

1. Utilisez XHR(XML HTTP Request) pour envoyer des données POST sans formulaire en JavaScript
2. Utiliser l’API Fetch pour envoyer des données POST sans formulaire en JavaScript
3. Utilisez le Navigator.sendBeacon() pour envoyer des données POST sans formulaire en JavaScript

Ce didacticiel explique comment envoyer des données de publication sans utiliser de formulaire en JavaScript.

Utilisez XHR(XML HTTP Request) pour envoyer des données POST sans formulaire en JavaScript

XHR est un objet utilisé pour faire des requêtes HTTP en JavaScript. Il aide à interagir avec le serveur et à échanger les données entre le client et le serveur. Nous pouvons extraire des données d’un serveur même sans actualiser la page entière. Il permet aux utilisateurs de continuer à travailler en ne perturbant qu’une partie d’une page. Nous pouvons utiliser cette méthode pour envoyer des données POST sans utiliser de formulaire.

const URL = 'delftstack.com'
var xhr = new XMLHttpRequest();
xhr.open('POST', URL, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({name: 'DelftStack'}));

Utiliser l’API Fetch pour envoyer des données POST sans formulaire en JavaScript

L’API JavaScript Fetch, comme XHR, permet d’envoyer des requêtes HTTP au serveur. Mais XHR n’a pas fait usage de promesses et a conduit à un code encombré et impur. Pour utiliser l’API Fetch, nous devons appeler la méthode fetch(). Il accepte les paramètres suivants:

• URL: L’URL de l’API à partir de laquelle demander des données.
• Un objet: C’est un objet spécifiant des propriétés supplémentaires sur le type de requête effectuée. Il possède 3 propriétés:
  • method: Il spécifie la méthode comme GET, POST, etc. Sa valeur doit être POST dans ce cas puisque nous faisons une requête POST.
  • body: l’objet body contient les données à envoyer.
  • headers: C’est un paramètre optionnel qui nous aide à effectuer diverses actions sur les en-têtes de requête et de réponse HTTP.

Après la méthode fetch(), nous spécifions la méthode promise then() et catch(). Si la promise retournée par fetch() est resolved, alors la fonction spécifiée dans then() est exécutée sinon la promise est rejected et la fonction à l’intérieur de catch() est appelée.

let data = {name: 'DelftStack'};
fetch('https://randomuser.me/api/?results=10', {
  method: 'POST',
  body: JSON.stringify(data)
}).then(res => {
  console.log('Promise resolved', res);
});

Utilisez le Navigator.sendBeacon() pour envoyer des données POST sans formulaire en JavaScript

La méthode Navigator.sendBeacon() permet d’envoyer des données à un serveur Web via des requêtes HTTP de manière asynchrone. Son application principale est d’envoyer des données d’analyse de site Web au serveur, mais il peut également être utilisé pour envoyer des données POST.

let data = {name: 'DelftStack'};
navigator.sendBeacon('https://randomuser.me/api/?results=10', data);