JavaScript POST

1. Use XHR(XML HTTP Request) para enviar dados POST sem um formulário em JavaScript
2. Use a API Fetch ​​para enviar dados POST sem um formulário em JavaScript
3. Use o Navigator.sendBeacon() para enviar dados POST sem um formulário em JavaScript

Este tutorial ensina como enviar dados de postagem sem usar um formulário em JavaScript.

Use XHR(XML HTTP Request) para enviar dados POST sem um formulário em JavaScript

XHR é um objeto que é usado para fazer solicitações HTTP em JavaScript. Ajuda a interagir com o servidor e a trocar dados entre o cliente e o servidor. Podemos extrair dados de um servidor mesmo sem atualizar a página inteira. Ele permite que os usuários continuem trabalhando interrompendo apenas uma parte da página. Podemos usar este método para enviar dados POST sem usar um formulário.

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

Use a API Fetch ​​para enviar dados POST sem um formulário em JavaScript

A API JavaScript Fetch, como XHR, ajuda a enviar solicitações HTTP para o servidor. Mas XHR não fazia uso de promessas e conduzia a um código confuso e sujo. Para usar a API Fetch, temos que chamar o método fetch(). Ele aceita os seguintes parâmetros:

• URL: a URL da API a partir da qual solicitar dados.
• Um objeto: é um objeto que especifica propriedades adicionais sobre o tipo de solicitação feita. Possui 3 propriedades:
  • method: especifica o método como GET, POST, etc. Seu valor deve ser POST neste caso, pois estamos fazendo uma solicitação POST.
  • body: o objeto body contém os dados a enviar.
  • headers: é um parâmetro opcional que nos ajuda a realizar várias ações nos cabeçalhos de solicitação e resposta HTTP.

Após o método fetch(), especificamos o método de promessa then() e catch(). Se a promise retornada por fetch() for resolved, a função especificada em then() será executada, caso contrário a promise será rejected e a função dentro de catch() será chamada.

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

Use o Navigator.sendBeacon() para enviar dados POST sem um formulário em JavaScript

O método Navigator.sendBeacon() ajuda a enviar dados para um servidor web por meio de solicitações HTTP de forma assíncrona. Sua principal aplicação é enviar dados analíticos de sites para o servidor, mas também pode ser usado para enviar dados POST.

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