Cargando



HTML5 – Ajax, Envío de Formularios

En este tutorial veremos como realizar el envío de datos mediante Ajax a un script que este corriendo en nuestro servidor y como podemos manipular la respuesta para mostrarsela al usuario.


dic 11 2013 16:57
Profesional
dic 12 2013 07:07
Uno de los usos primordiales que se le dan a Ajax es el envío de datos al servidor, para ello utilizamos los formularios de HTML5, con esto nuestros scripts de servidor pueden hacer cálculos, validaciones, procesamientos, activar otros scripts, etc. Todo lo que nuestras necesidades requieran.

De esta forma logramos respuestas a peticiones en nuestros documentos, evitando la recarga de la página completa, mejorando la navegación y creando efectos mucho más óptimos e interactivos para el usuario que ingrese a nuestro site.

Enviando los datos del formulario

Como mencionamos anteriormente el uso de los formularios es clave para el envío de datos al servidor, una de las formas más comunes es recolectar la información por nuestra cuenta y darle formato, de esta forma estaría disponible para ser enviada.

Veamos el siguiente código con el cual podemos ilustrar y definir lo que estamos explicando en esta sección teórica:

<!DOCTYPE HTML>
<html>
<head>
	 <title>Example</title>
	 <style>
		 .table {display:table;}
		 .row {display:table-row;}
		 .cell {display: table-cell; padding: 5px;}
		 .label {text-align: right;}
	 </style>
</head>
<body>
	 <form id="fruitform" method="post" action="http://titan:8080/form">
		 <div class="table">
			 <div class="row">
				 <div class="cell label">Bananas:</div>
				 <div class="cell"><input name="bananas" value="2"/></div>
			 </div>
			 <div class="row">
				 <div class="cell label">Apples:</div>
				 <div class="cell"><input name="apples" value="5"/></div>
			 </div>
			 <div class="row">
				 <div class="cell label">Cherries:</div>
				 <div class="cell"><input name="cherries" value="20"/></div>
			 </div>
			 <div class="row">
				 <div class="cell label">Total:</div>
				 <div id="results" class="cell">0 items</div>
			 </div>
		 </div>
<button id="submit" type="submit">Submit Form</button>
	 </form>
	 <script>
		 [b] document.getElementById("submit").onclick = handleButtonPress;
var httpRequest;
function handleButtonPress(e) {
e.preventDefault();
var form = document.getElementById("fruitform");
var formData = "";
var inputElements = document.getElementsByTagName("input");
for (var i = 0; i < inputElements.length; i++) {
formData += inputElements[i].name + "="
+ inputElements[i].value + "&";
}
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = handleResponse;
httpRequest.open("POST", form.action);
httpRequest.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
httpRequest.send(formData);
}
function handleResponse() {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
document.getElementById("results").innerHTML
= httpRequest.responseText;
}
}
	 </script>
</body>
</html>

En este código simplemente tenemos un formulario con varios campos input, en el bloque donde empiezan las etiquetas <script> vemos como tomamos los datos del formulario y hacemos una iteración con cada input que encontramos, de forma que los podemos manipular y agregarlo a una variable que contendrá un string con cada uno de los datos, este string luce similar a esto:

bananas=2&apples=5&cherries=20&.

Luego estos datos los podemos pasar vía POST a nuestro servidor y por último la respuesta recibida la incorporamos en un elemento con un id determinado, con ello podemos introducir un cambio en la página sin necesidad de refrescarla completamente.

Veamos en la siguiente imagen como quedaría esto en nuestro navegador:


Podemos notar que esto nos permite actualizar la cantidad de los items que colocamos en los campos input, creando así un efecto asíncrono que le da más riqueza e interactividad a nuestra página o documento HTML5.

Con esto finalizamos este tutorial, como vemos es bastante sencillo implementar una solución Ajax que nos permita enviar datos al servidor, sin necesidad de generar un documento nuevo y de esta forma evitar la recarga de la página y la perdida del contexto de lo que el usuario pueda estar viendo en su pantalla.

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X