Así que 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 llegado hasta aquí 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?
Obtiene los datos completos del formulario como un array y los encadena en json.
var formData = JSON.stringify($("#myForm").serializeArray());
Usted puede utilizarlo más tarde en ajax. O si no está usando ajax; póngalo en un área de texto oculta y páselo al servidor. Si estos datos se pasan como una cadena json a través de los datos del formulario normal, entonces usted tiene que decodificarlo utilizando json_decode. Entonces obtendrá todos los datos en un array.
$.ajax({
type: "POST",
url: "serverUrl",
data: formData,
success: function(){},
dataType: "json",
contentType : "application/json"
});
HTML no proporciona ninguna forma de generar JSON a partir de los datos del formulario.
Si realmente quieres manejarlo desde el cliente, entonces tendrías que recurrir a usar JavaScript para:
Probablemente sea mejor que te quedes con los datos application/x-www-form-urlencoded
y los proceses en el servidor en lugar de JSON. Tu formulario no tiene ninguna jerarquía complicada que se beneficie de una estructura de datos JSON.
Actualización en respuesta a la reescritura mayor de la pregunta...
readystatechange
, así que no haces nada con la respuestatu código está bien pero nunca se ejecuta, porque del botón de envío [type="submit"] simplemente sustitúyelo por type=button.
<input value="Submit" type="button" onclick="submitform()">
dentro de tu script; form no está declarado.
let form = document.forms[0];
xhr.open(form.method, form.action, true);