3/9/2020 ¿Cuál es la forma de enviar un objeto JSON a través de una solicitud POST en JavaScript (no jQuery o Node.js)?

- Quora

Busca preguntas, gente y temas Iniciar sesión

Inicia sesión en Quora con Google

Javascript Aprender JavaScript Node.js Sistemas de archivos

Maria Isabel
JavaScript (lenguaje de programación) Java (lenguaje de programación) Desarrollo web [email protected]

Lenguajes de programación Programación informática

Continuar como Maria

¿Cuál es la forma de enviar un objeto JSON a través de una Para crear tu cuenta, Google compartirá tu nombre,
solicitud POST en JavaScript (no jQuery o Node.js)? tu dirección de correo electrónico y tu foto de perfil
con Quora. Consulta la política de privacidad y los
2 respuestas términos del servicio de Quora.

Diego Ramírez
Respondido el December 4, 2018

Respondido inicialmente: ¿Cuál es la forma de enviar un objeto JSON a través de una solicitud POST en
JavaScript (no jQuery o Nodejs)?
Cuando decís que sin JQuery o sin Node.JS asumo que te referís a hacerlo desde un
navegador como chrome o firefox.

En esas condiciones tenes disponible en el navegador un objeto que se llama

XmlHttpRequest con el que podes hacer peticiones.

1 let xmlhttp = new XMLHttpRequest(); // El objeto que te provee el

browser
2 xmlhttp.open("POST", "/path-relativo-al-servidor-que-usas"); // le
dices que quieres hacer un POST y a que path relativo
3 xmlhttp.setRequestHeader("Content-Type", "application/json"); // le
dices que vas a enviar un JSON
4 let obj = {"clave":"valor"}; // Supongamos este es tu objeto
5 let jsonData = JSON.stringify(obj); // Conviertes el objeto a JSON
6 xmlhttp.send(jsonData); // envías el JSON

Dos cosas que considerar,

Este POST es a una dirección relativa al host donde estaba tu código, ejemplo si
lo corriste desde localhost, la petición irá a http://localhost/path-relativo-
al-servidor-que-usas.

No estoy manejando la respuesta del servidor, puedes ver mas detalles en la

excelente documentación de mozilla XMLHttpRequest.send() (está en inglés lo
sé, pero el traductor de goole es tu amigo)

1,1 K visitas

Preguntas relacionadas Más respuestas a continuación

¿Cómo puedo convertir una cadena de formato JSON en un objeto real en JS?

¿Cómo parsar un objeto JSON usando jQuery?

¿Cuál es el propósito de JSON?

¿Cuándo debo usar PHP pero no Node.js?

¿Qué es mejor para back end, PHP o Node.js?

F. Igor Moreno, Programando desde los 12 años (1990)

Respondido el December 5, 2018 · El autor tiene 151 respuestas y 486,5 K visitas a sus
respuestas

La forma actual de realizar esto es usando la función fetch de Javascript :

1 fetch( URL , options )

2 .then( result =>
3 //procesar la respuesta
4 )

https://es.quora.com/Cuál-es-la-forma-de-enviar-un-objeto-JSON-a-través-de-una-solicitud-POST-en-JavaScript-no-jQuery-o-Node-js 1/3
3/9/2020 ¿Cuál es la forma de enviar un objeto JSON a través de una solicitud POST en JavaScript (no jQuery o Node.js)? - Quora
Donde options son una serie de opciones adicionales de la petición:
Busca preguntas, gente y temas Iniciar sesión
method : Método HTTP (GET, POST, PUT, DELETE, etc) Inicia sesión en Quora con Google

headers: Lista de encabezados HTTP adicionales (Content-type,

Authorization, etc) Maria Isabel
[email protected]
body (Contenido de la petición, generalmente para enviar datos de formulario
codificados o JSON, usando los métodos POST o PUT) Continuar como Maria

En el siguiente ejemplo se muestra el uso de todas estas opciones: Para crear tu cuenta, Google compartirá tu nombre,
tu dirección de correo electrónico y tu foto de perfil
1 var apiUrl="https://api.host/v1/user/234234"
con Quora. Consulta la política de privacidad y los
2 var data = {
términos del servicio de Quora.
3 name : 'Fred',
4 email : '[email protected]'
5 }
6 fetch(apiUrl,{
7 method: 'POST',
8 headers: {
9 'Content-type' : 'text/json'
10 },
11 body: JSON.stringify(data)
12 })
13 .then(response =>
14 response.json()
15 )
16 .then(data => {
17 console.log(data)
18 })

En este ejemplo:

Se envía una petición POST a una API (GET por defecto, podría ser PUT, POST,
DELETE, etc.)

En el cuerpo de la petición (body) se envían los datos en JSON.

Se debe enviar el header Content-type: text/json para que el servidor lo

pueda entender como JSON
Preguntas relacionadas
Luego del fetch, puede declararse una serie de procesamientos usando .then(),
cada resultado de uno se lleva al siguiente .then(): ¿Cómo puedo convertir una cadena de
formato JSON en un objeto real en JS?
En el ejemplo, si la respuesta (response) también es en JSON, primero se
procesa la respuesta y se transporta en un objeto desde JSON (usando ¿Cómo parsar un objeto JSON usando jQuery?
response.json())
¿Cuál es el propósito de JSON?
En la siguiente etapa, el resultado anterior (data) se puede utilizar de la
manera que se desea. ¿Cuándo debo usar PHP pero no Node.js?

La función fetch responde a la estandarización del método clásico usando ¿Qué es mejor para back end, PHP o Node.js?
XMLHttpRequest . XMLHttpRequest es un objeto JavaScript que fue diseñado por
Microsoft y adoptado por Mozilla, Apple y Google. Actualmente es un estándar de la W3C ¿Cuál es la mejor forma de aprender
. Fetch proporciona una mejor alternativa que puede ser empleada fácilmente por otras JavaScript?
tecnologías como Service Workers. Fetch también aporta un único lugar lógico en el que
definir otros conceptos relacionados con HTTP como CORS y extensiones para HTTP.

JQuery.ajax() es una implementación similar a fetch, pero difiere en dos conceptos, que
permite a esta ultima mayor control sobre el proceso:

Las peticiones con código de error HTTP (400, 503, etc) no son rechazadas con
fetch. El objeto response contendrá un atributo ok = false cuando esto suceda.
Solo serán rechazadas ante errores de comunicación de red.

Envío de cookies no es automático. Esto permite controlar que encabezados se

envían y cumplir restricciones de algunas APIs que no permiten ciertos
encabezados por seguridad.

1,9 K visitas · Ver 3 votantes positivos

https://es.quora.com/Cuál-es-la-forma-de-enviar-un-objeto-JSON-a-través-de-una-solicitud-POST-en-JavaScript-no-jQuery-o-Node-js 2/3
3/9/2020 ¿Cuál es la forma de enviar un objeto JSON a través de una solicitud POST en JavaScript (no jQuery o Node.js)? - Quora
Preguntas relacionadas
Busca preguntas, gente y temas Iniciar sesión
¿Cómo puedo convertir una cadena de formato JSON en un objeto real en JS? Inicia sesión en Quora con Google

¿Cómo parsar un objeto JSON usando jQuery?

Maria Isabel
¿Cuál es el propósito de JSON? [email protected]

¿Cuándo debo usar PHP pero no Node.js? Continuar como Maria

¿Qué es mejor para back end, PHP o Node.js? Para crear tu cuenta, Google compartirá tu nombre,
tu dirección de correo electrónico y tu foto de perfil
¿Cuál es la mejor forma de aprender JavaScript? con Quora. Consulta la política de privacidad y los
términos del servicio de Quora.
¿Cuál es la diferencia entre Javascript y NodeJS?

¿Qué es JSON?

¿Vale la pena aprender Node.js?

¿Cómo desinstalar completamente Node.js y reinstalar la última versión de Node.js?

¿Cuál es el IDE mejor y completamente gratis para el desarrollo de Node.js?

¿Cuál es la diferencia entre Node y Node.js?

¿Qué debemos usar, JavaScript o jQuery?

¿Cómo usa Instagram Node.js?

¿Cuál necesita más recursos, Django o Node.js?

Sobre Quora · Empleo · Privacidad · Condiciones · Contacto · Idiomas · © Quora Inc. 2020

https://es.quora.com/Cuál-es-la-forma-de-enviar-un-objeto-JSON-a-través-de-una-solicitud-POST-en-JavaScript-no-jQuery-o-Node-js 3/3