Cómo enviar un objeto JSON utilizando datos de formulario html

129

Entonces tengo este formulario HTML:

<html>
<head><title>test</title></head>
<body>
    <form action="myurl" method="POST" name="myForm">
        <p><label for="first_name">First Name:</label>
        <input type="text" name="first_name" id="fname"></p>

        <p><label for="last_name">Last Name:</label>
        <input type="text" name="last_name" id="lname"></p>

        <input value="Submit" type="submit" onclick="submitform()">
    </form>
</body>
</html>

¿Cuál sería la forma más fácil de enviar los datos de este formulario como un objeto JSON a mi servidor cuando un usuario hace clic en enviar?

ACTUALIZACIÓN: He ido tan lejos como esto, pero no parece funcionar:

<script type="text/javascript">
    function submitform(){
        alert("Sending Json");
        var xhr = new XMLHttpRequest();
        xhr.open(form.method, form.action, true);
        xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
        var j = {
            "first_name":"binchen",
            "last_name":"heris",
        };
        xhr.send(JSON.stringify(j));

¿Qué estoy haciendo mal?

javascript jquery html json forms kstratis
fuente
1
Eche un vistazo a $.ajaxy serializeen la API jQuery.
Rory McCrossan
1
¿Tiene que ser absolutamente un objeto JSON? ¿Qué estructura debe tener el objeto?
Anthony Grist
1
@AnthonyGrist Sí, tiene que ser un JSON porque está dirigido a un servicio ReST.
kstratis
44
¿Qué significa "no parece funcionar"? Recuerde, no podemos ver su pantalla.
Dour High Arch
2
@ Konos5 - REST no tiene nada que ver con JSON. No requiere que los datos estén en ningún formato en particular.
danielm

Respuestas:

136

Obtenga datos de formulario completos como matriz y json lo codifique.

var formData = JSON.stringify($("#myForm").serializeArray());

Puedes usarlo más tarde en ajax. O si no estás usando ajax; póngalo en un área de texto oculta y pase al servidor. Si estos datos se pasan como una cadena json a través de datos de forma normal, entonces debe decodificarlos usando json_decode . Luego obtendrá todos los datos en una matriz.

$.ajax({
  type: "POST",
  url: "serverUrl",
  data: formData,
  success: function(){},
  dataType: "json",
  contentType : "application/json"
});
SachinGutte
fuente
44
Has etiquetado la pregunta con jQuery. Entonces, ¿lo estás usando? con la $.ajaxque es muy fácil pasar estos datos.
SachinGutte
51

HTML no proporciona forma de generar JSON a partir de datos de formulario.

Si realmente quiere manejarlo desde el cliente, entonces debería recurrir al uso de JavaScript para:

  1. recopile sus datos del formulario a través de DOM
  2. organizarlo en un objeto o matriz
  3. generar JSON con JSON.stringify
  4. Publíquelo con XMLHttpRequest

Probablemente sea mejor atenerse a los application/x-www-form-urlencodeddatos y procesarlos en el servidor en lugar de JSON. Su formulario no tiene una jerarquía complicada que se beneficiaría de una estructura de datos JSON.

Actualización en respuesta a una gran reescritura de la pregunta ...

  • Tu JS no tiene readystatechange controlador, por lo que no hace nada con la respuesta
  • Activa el JS cuando se hace clic en el botón Enviar sin cancelar el comportamiento predeterminado. El navegador enviará el formulario (de forma regular) tan pronto como se complete la función JS.
Quentin
fuente
1
Bien, entonces, ¿cómo soluciono esto?
kstratis
1
@Quentin: en mi caso, necesito POST de dominio cruzado sin control de dominio.
user2284570
1
@ user2284570 - Si tiene una nueva pregunta, haga una.
Quentin
1
Hay una propuesta para agregar enctype='application/json'a la definición del formulario para crear datos JSON w3.org/TR/html-json-forms
EkriirkE
44
@EkriirkE - ¿Has leído esa página? Dice, en una caja masiva con una franja de peligro negra y amarilla alrededor . Cuidado. Esta especificación ya no se encuentra en mantenimiento activo y el Grupo de trabajo HTML no tiene la intención de mantenerla más.
Quentin
3

su código está bien pero nunca se ejecutó, debido al botón de enviar [type = "submit"] simplemente reemplácelo por type = button

<input value="Submit" type="button" onclick="submitform()">

dentro de tu guión; forma no se declara.

let form = document.forms[0];
xhr.open(form.method, form.action, true);
tdjprog
fuente
Exactamente type = "button" es muy importante, si no lo usa, redirige con los parámetros de url.
Rohit Parte
1

Llego tarde, pero debo decir que para aquellos que necesitan un objeto, usando solo html, hay una manera. En algunos marcos del lado del servidor como PHP, puede escribir el siguiente código:

<form action="myurl" method="POST" name="myForm">
        <p><label for="first_name">First Name:</label>
        <input type="text" name="name[first]" id="fname"></p>

        <p><label for="last_name">Last Name:</label>
        <input type="text" name="name[last]" id="lname"></p>

        <input value="Submit" type="submit">
    </form>

Entonces, necesitamos configurar el nombre de la entrada como object[property]para obtener un objeto. En el ejemplo anterior, obtuvimos datos con el siguiente JSON:

{
"name": {
  "first": "some data",
  "last": "some data"
 }
}
orafaelreis
fuente