JavaScript POST

1. Usa XHR(XML HTTP Request) per inviare dati POST senza un modulo in JavaScript
2. Usare l’API Fetch per inviare dati POST senza un modulo in JavaScript
3. Usa il Navigator.sendBeacon() per inviare i dati POST senza un modulo in JavaScript

Questo tutorial insegna come inviare i dati dei post senza utilizzare un modulo in JavaScript.

Usa XHR(XML HTTP Request) per inviare dati POST senza un modulo in JavaScript

XHR è un oggetto utilizzato per effettuare richieste HTTP in JavaScript. Aiuta a interagire con il server e a scambiare i dati tra il client e il server. Possiamo estrarre dati da un server anche senza aggiornare l’intera pagina. Consente agli utenti di continuare a lavorare interrompendo solo una parte di una pagina. Possiamo usare questo metodo per inviare dati POST senza usare un form.

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'}));

Usare l’API Fetch per inviare dati POST senza un modulo in JavaScript

L’API di recupero JavaScript, come XHR, aiuta a inviare richieste HTTP al server. Ma XHR non ha fatto uso delle promesse e ha portato a un codice disordinato e impuro. Per utilizzare l’API Fetch, dobbiamo chiamare il metodo fetch(). Accetta i seguenti parametri:

• URL: l’URL dell’API da cui richiedere i dati.
• Un oggetto: è un oggetto che specifica proprietà aggiuntive sul tipo di richiesta effettuata. Ha 3 proprietà:
  • method: specifica il metodo come GET, POST, ecc. Il suo valore dovrebbe essere POST in questo caso poiché stiamo effettuando una richiesta POST.
  • body: l’oggetto body contiene i dati da inviare.
  • header: è un parametro opzionale che ci aiuta a eseguire varie azioni sulle intestazioni di richiesta e risposta HTTP.

Dopo il metodo fetch(), specifichiamo il metodo della promessa then() e catch(). Se la promise restituita da fetch() è resolved, la funzione specificata in then() viene eseguita altrimenti la promise viene rejected e viene chiamata la funzione all’interno di catch().

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

Usa il Navigator.sendBeacon() per inviare i dati POST senza un modulo in JavaScript

Il metodo Navigator.sendBeacon() aiuta a inviare dati a un server web su richieste HTTP in modo asincrono. La sua applicazione principale consiste nell’inviare dati analitici del sito web al server, ma può anche essere utilizzato per inviare dati POST.

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