JavaScript POST

1. Usar XHR(XML HTTP Request) para enviar datos POST sin un formulario en JavaScript
2. Utilizar la API Fetch para enviar datos POST sin un formulario en JavaScript
3. Utilice Navigator.sendBeacon() para enviar datos POST sin un formulario en JavaScript

Este tutorial enseña cómo enviar datos de publicaciones sin usar un formulario en JavaScript.

Usar XHR(XML HTTP Request) para enviar datos POST sin un formulario en JavaScript

XHR es un objeto que se utiliza para realizar solicitudes HTTP en JavaScript. Ayuda a interactuar con el servidor y a intercambiar los datos entre el cliente y el servidor. Podemos extraer datos de un servidor incluso sin actualizar toda la página. Permite a los usuarios continuar trabajando interrumpiendo solo una parte de una página. Podemos usar este método para enviar datos POST sin usar un formulario.

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

Utilizar la API Fetch para enviar datos POST sin un formulario en JavaScript

JavaScript Fetch API, como XHR, ayuda a enviar solicitudes HTTP al servidor. Pero XHR no hizo uso de las promesas y dio lugar a un código desordenado y sucio. Para usar la API de Fetch, tenemos que llamar al método fetch(). Acepta los siguientes parámetros:

• URL: la URL de la API desde la que solicitar datos.
• Un objeto: Es un objeto que especifica propiedades adicionales sobre el tipo de solicitud realizada. Tiene 3 propiedades:
  • method: Especifica el método como GET, POST, etc. Su valor debe ser POST en este caso ya que estamos haciendo una petición POST.
  • body: el objeto body contiene los datos a enviar.
  • headers: Es un parámetro opcional que nos ayuda a realizar diversas acciones sobre los encabezados de solicitud y respuesta HTTP.

Después del método fetch(), especificamos el método de promesa then() y catch(). Si la promise devuelta por fetch() está resolved, entonces la función especificada en then() se ejecuta; de lo contrario, la promise es rejected y se llama a la función dentro de 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);
});

Utilice Navigator.sendBeacon() para enviar datos POST sin un formulario en JavaScript

El método Navigator.sendBeacon() ayuda a enviar datos a un servidor web a través de solicitudes HTTP de forma asíncrona. Su aplicación principal es enviar datos de análisis de sitios web al servidor, pero también se puede utilizar para enviar datos POST.

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