datos POST en formato JSON

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

<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="[email protected]" /> 
</form> 
</body>

Así se ve la publicación ahora. Necesito que envíe los valores en formato JSON y realice el POST con JavaScript.

Fuente

2009-08-10 Anonymous

¿Qué estructura deberían tener los datos JSON? Simplemente '{" firstName ":" harry "," lastName ":" tester "," toEmail ":" [email protected] "}'? – Gumbo

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

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 quitar tu cuerpo cargado.

Fuente

2009-08-10 16:58:09

Eso no va a enviar los datos en formato JSON. –

De hecho, la función de serialización convierte datos de formulario en un objeto JSON. –

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

125

No estoy seguro si quiere 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 
    }; 
};

Fuente

2012-10-23 19:55:58

+43

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

@IanKuca Gracias :) Me preguntaba si podemos enviar los datos json sin urlencode los datos? Quiero decir que quiero enviar datos como '" cmd ":" "' not '% 3Cimg + src% 3D0 + onerror% 3Dalert% 281% 29% 3E' – liweijian

@liweijian Debería ir con lo que devuelva' JSON.stringify' . –

Otro ejemplo está disponible aquí:

Sending a JSON to server and retrieving a JSON in return, without JQuery

que es lo mismo que Jans respuesta, pero también comprueba la respuesta de los servidores mediante el establecimiento de una devolución de llamada onreadystatechange en el XMLHttpRequest.

Fuente

2016-12-10 14:47:34

Usando el nuevo FormData objeto (y algunas otras cosas ES6), se puede hacer esto para dar vuelta a su forma entera en JSON:

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

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

Fuente

2017-02-22 19:13:45 Felk

Respuesta

Cuestiones relacionadas