
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:
Una breve explicación:
El formulario debe tener name y id, con el mismo nombre, a su vez cada campo.
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 =
}
if (ajax.readyState == 4) {
document.getElementById(capa).innerHTML = ajax.responseText;
}
}
ajax.send(cadenaFormulario+"&"+seccion);
}
Una breve explicación:
- EnviarForm(_pagina,seccion,formid,capa): Se reciben los valores que enviamos con el formulario.
- 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:
- Con el IF, pregunto si el valor de la variable C, es de 3, que es el caso.
- Después veo si las variables no están vacías con la función EMPTY.
- Por ultimo, imprimo el titulo de la noticia.