Cómo enviar todos los datos de un Formulario con AJAX

En las pasadas entradas (véase AJAX), comentábamos cómo cargar datos de manera asíncrona con AJAX.

Pero no hemos trabajado en el envío de datos con formularios, que es en si, algo muy básico. Generaremos un script genérico para no cambiarlo cada vez que necesitemos usarlo para otro formulario, además haremos que los datos que se envían en otra página, se reciban en una sección especifica.

1. Crearemos nuestro formulario, por ejemplo agregar una noticia:

<form name="noticias" id="noticias" action="#">Título:<input name="titulo" type="text" id="titulo" size="50">Tags:<input name="tags" type="text" id="tags" size="50"><input onclick="EnviarForm('noticiasa.php','c=3','noticias','contenido');" type="submit" value="Añadir" name="Submit"></form>

Una breve explicación:

1. El formulario debe tener name y id, con el mismo nombre, a su vez cada campo.
2. Se añade el evento ONCLICK en el boton, el cual EnviarForm (el nombre de la función creada en AJAX) envía 4 parametros: noticiasa.php (en donde se enviarán los datos, y en dicha página se recibirán con POST o REQUEST). c=3 (es la sección de la página a donde se enviarán los datos, para una explicación más profunda en Enviar valores con AJAX). noticias (id, nombre del formulario). contenido (nombre del DIV, ver en Cargar páginas con AJAX).

2. Creación del Script de AJAX

Recuerden que para que funcione nuestro script, debemos crear primero el Objeto de AJAX, de esta manera:

function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); return xmlHttp; } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); return xmlHttp; } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); return xmlHttp; } catch (e) { alert("Tu navegador no soporta AJAX!"); return false; }}}}

Ya creado, podremos añadir nuestra función para el envío de todos los campos del formulario:

function EnviarForm(_pagina,seccion,formid,capa) {
var ajax;
var
Formulario = document.getElementById(formid);
var longitudFormulario =
Formulario.elements.length;
var cadenaFormulario = "";
var
sepCampos;
sepCampos = "";
for (var i=0; i <= Formulario.elements.length-1;i++) { cadenaFormulario += sepCampos+Formulario.elements[i].name+'='+encodeURI(Formulario.elements[i].value); sepCampos="&"; } ajax = ajaxFunction(); ajax.open("POST", _pagina, true); ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajax.onreadystatechange = function() { if (ajax.readyState==1){ document.getElementById(capa).innerHTML = "<img src="img/loading.gif" align="'center'" /> Aguarde por favor...";
}
if (ajax.readyState == 4) {
document.getElementById(capa).innerHTML = ajax.responseText;
}
}

ajax.send(cadenaFormulario+"&"+seccion);
}

Una breve explicación:

1. EnviarForm(_pagina,seccion,formid,capa): Se reciben los valores que enviamos con el formulario.
2. Enviamos todos los campos en cadenaFormulario, además concatenamos en que sección de la página los recibiremos (seccion).

3. Recibiendo los valores de los campos

En nuestra página (noticiasa.php), agregaremos lo siguiente:

if($_REQUEST["c"]==3){
if(!empty($_REQUEST["titulo"]) or
!empty($_REQUEST["tags"]) )
{
echo $_REQUEST["titulo"]; //Titulo de la Noticia
}

Una breve explicación:

1. Con el IF, pregunto si el valor de la variable C, es de 3, que es el caso.
2. Después veo si las variables no están vacías con la función EMPTY.
3. Por ultimo, imprimo el titulo de la noticia.