Datos POST en formato JSON

86

Tengo algunos datos que necesito convertir a formato JSON y luego PUBLICARlos con una función de JavaScript.

<body onload="javascript:document.myform.submit()">
<form action="https://www.test.net/Services/RegistrationService.svc/InviteNewContact" method="post" name="myform">
  <input name="firstName" value="harry" />
  <input name="lastName" value="tester" />
  <input name="toEmail" value="testtest@test.com" />
</form>
</body>

Así es como se ve la publicación ahora. Necesito enviar los valores en formato JSON y hacer el POST con JavaScript.

— Damjan Pavlica
fuente

¿Qué estructura deben tener los datos JSON? Justo {"firstName":"harry", "lastName":"tester", "toEmail":"testtest@test.com"}?

— Gumbo

1

¡Sí, los datos estarían en el formato que describiste! gracias por las respuestas!

172

No estoy seguro si quieres jQuery.

var form;

form.onsubmit = function (e) {
  // stop the regular form submission
  e.preventDefault();

  // collect the form data while iterating over the inputs
  var data = {};
  for (var i = 0, ii = form.length; i < ii; ++i) {
    var input = form[i];
    if (input.name) {
      data[input.name] = input.value;
    }
  }

  // construct an HTTP request
  var xhr = new XMLHttpRequest();
  xhr.open(form.method, form.action, true);
  xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');

  // send the collected data as JSON
  xhr.send(JSON.stringify(data));

  xhr.onloadend = function () {
    // done
  };
};

— JK
fuente

62

Creo que este es un ejemplo bueno, limpio y conciso de cómo hacer el trabajo en 20 líneas de código, sin 100K de marco.

— spidee

1

@IanKuca Gracias :) Me preguntaba si podemos enviar los datos json sin urlencode los datos. Quiero decir, quiero enviar datos como "cmd":"<img src=0 onerror=alert(1)>"no%3Cimg+src%3D0+onerror%3Dalert%281%29%3E

— tli2020

2

@liweijian Deberías ir con cualquier JSON.stringifydevolución.

— JK

2

@IanKuca Parece que los datos de la publicación fueron codificados por html formnot JSON.stringify.

— tli2020

@liweijian, primero deberías codificar por URL los valores del formulario si ese es el caso

— Kevin Peno

28

Aquí hay un ejemplo usando jQuery ...

 <head>
   <title>Test</title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script type="text/javascript" src="http://www.json.org/json2.js"></script>
   <script type="text/javascript">
     $(function() {
       var frm = $(document.myform);
       var dat = JSON.stringify(frm.serializeArray());

       alert("I am about to POST this:\n\n" + dat);

       $.post(
         frm.attr("action"),
         dat,
         function(data) {
           alert("Response: " + data);
         }
       );
     });
   </script>
</head>

La función jQuery serializeArray crea un objeto Javascript con los valores del formulario. Luego, puede usar JSON.stringify para convertir eso en una cadena, si es necesario. Y también puedes eliminar la carga de tu cuerpo.

— Josh Stodola
fuente

2

Josh, el ejemplo de jQuery muestra lo contrario: se parece más a una cadena de consulta estándar que a JSON.

— Sampson

4

Ustedes tienen razón. Actualicé la respuesta en consecuencia. ¡Gracias!

— Josh Stodola

7

Este es un buen ejemplo, sin embargo, según el título, esto debe realizarse usando javascript, no una biblioteca de javascript (como jQuery en este caso)

— Juan Carlos Alpizar Chinchilla

4

Por supuesto, eres bienvenido a hacerlo de la manera difícil. Todos los demás usan jQuery.

— PaulMurrayCbr

9

La pregunta pregunta cómo publicar datos usando javascript , no la biblioteca jquery. Esto responde a la pregunta incorrecta.

— Blair Anderson

3

Otro ejemplo está disponible aquí:

Enviar un JSON al servidor y recuperar un JSON a cambio, sin JQuery

Que es lo mismo que la respuesta de jans, pero también verifica la respuesta de los servidores estableciendo una devolución de llamada onreadystatechange en XMLHttpRequest.

— Andrew Paté
fuente

1

Usando el nuevo objeto FormData (y otras cosas de ES6), puede hacer esto para convertir su formulario completo en JSON:

let data = {};
let formdata = new FormData(theform);
for (let tuple of formdata.entries()) data[tuple[0]] = tuple[1];

y luego xhr.send(JSON.stringify(data));como en la respuesta original de Jan.

— Felk
fuente

Eso no funcionará. Los objetos FormData no se vinculan de forma útil a JSON.

— Quentin