Métodos de envío de formularios en JavaScript

Los formularios pueden enviarse de dos maneras: método GET o método POST. La forma de envío del formulario se regula mediante el atributo method del formulario.

Por ejemplo, especifiquemos el método de envío GET para el formulario:

<form action="/handler/" method="GET">
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Y ahora el método POST:

<form action="/handler/" method="POST">
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Ahora veamos la diferencia entre los dos métodos de envío. En el caso del método GET, los datos del formulario serán visibles en el navegador en forma de la llamada cadena de consulta (query string), que representa pares de tipo clave-valor, donde la clave será el nombre del elemento del formulario y el valor serán los datos introducidos en él. Además, los pares de valores estarán separados por ampersands.

Los datos enviados por el método GET llegarán a nuestro servidor en la propiedad get del objeto con datos:

export default {
	'/handler/': function(data) {
		console.log(data.get); // se mostrará en la consola del servidor
		return 'form data received';
	}
}

Y los datos enviados por el método POST llegarán a nuestro servidor en la propiedad post del objeto con datos:

export default {
	'/handler/': function(data) {
		console.log(data.post); // se mostrará en la consola del servidor
		return 'form data received';
	}
}

Para abreviar, se puede realizar una desestructuración para obtener nuestros datos en una variable separada:

export default {
	'/handler/': function({get, post}) {
		console.log(get);
		console.log(post);
		return 'form data received';
	}
}