Como procesar campos de formulario con AJAX !!

Diabliyo · 18 Agosto 2008, 22:22 PM

Hola:

Como bien sabemos AJAX por lo general realiza el procesamiento de los datos ya bien sobre la mismia hoja PHP donde estamos trabajando o bien sobre una nueva hoja PHP, eso dependiendo las neecsidades, pero el metodo que he optado yo es procesar las llamadas a AJAX usando una hoja php llamada AJAX.php, en esta hoja proceso todas las variales enviadas mediante el stream GET o POST, segun se indique en la misma funcion con la que llamo a AJAX.

La funcion que utilizo actualmente para procesar datos comunes e inputs/select/textarea de un formulario (vaya tipo POST) es:

SCRIPT.JS

Código (javascript) [Seleccionar]

//Funcion para obtener conector AJAX
function ajax()
	{
	var pagina=false; //conector ajax
	
	if( window.XMLHttpRequest ) //Navegador Firefox
		pagina= new XMLHttpRequest(); //creamos objeto para el navegador
	else if( window.ActiveXObject ) //Navegador Internet Explorer
		{
		try //Version Actual
			{
			pagina= new ActiveXObject( "Msxml2.XMLHTTP" ); //creamos objeto para el navegador
			}
		catch(e) //version Antigua
			{
			try
				{
				pagina= new ActiveXObject( "Microsoft.XMLHTTP" ); //creamos objeto para el navegador
				}
			catch(e)
				{
				}
			}
		}
	return pagina;
	}

//El argunmento 'vars' contiene las variables que procesara la hoja AJAX.PHP
//El argumento 'capaview' es la capa en donde escribiremos los resultados
//El argumento 'flujoddatos; indica el flujo: GET o POST
//El argumento 'varsform' posee una trama de caracteres delimitadas por un  :  (dos puntos), esta trama serian los nombres de las variables del formulario (input's, select's, textare's, etc...)
function cargar_datos( vars, capaview, flujoddatos, varsform )
	{
	var conector, capa, url;
	
	url= 'ajax.php'; //mis funciones para ajax
	capa= document.getElementById(capaview); //capa
	
	conector= ajax(); //funcion que crea el objeto ajax para el navegador
	conector.open( flujoddatos, url+'?'+vars, true ); //abrimos el flujo de datos
	conector.onreadystatechange= function() //funcion que indica estado y responde
		{
		if( conector.readyState==1 ) //cargando
			{
			capa.innerHTML= "<center><img src='imagenes/loading.gif'><br><b>CARGANDO...</b></center>";
			}
		else if( conector.readyState==4 ) //proceso completado
			{
			if( conector.status==200 ) //completado con exito
				{
				if( varsform!=0 ) //si estamos procesado variables de un formulario, establecemos Request
					conector.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
				capa.innerHTML= conector.responseText;
				}
			else if( conector.status==404 ) //no se encontro hoja
				{
				capa.innerHTML= "<center><img src='imagenes/404.png'></center>";
				}
			else //error
				{
				capa.innerHTML= conector.status;
				}
			}
		}

	if( varsform!=0 ) //si el argumento es distinto de 0, entonces estamos enviando trama de variables
		{
		var myarr= varsform.split(':'); //dividimos
		var trama=""; //establecemos
		var i=0; //contador de ciclo
		
		for( i=0; i<(myarr.length); i++ ) //ciclo
			{
			if( i>0 )
				trama += "&";
			trama += myarr[i]+"="+document.getElementById(myarr[i]).value;
			}

		conector.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" ); //establecemos request
		conector.send(trama); //enviamos la trama
		}
	else
		conector.send(null); //enviamos NULL en caso que solo se procesan variables normales
	}

INDEX.PHP

Código (php) [Seleccionar]

<html>
<head>
<title>Proceando Formulario con AJAX dentro de la hoja comun</title>
<script language="javascript" type="text/javascript" src="script.js"></script>
</head>

<body>
<?php
echo "<div id=\"area_box\">";

echo "<form action=\"#\" method=\"POST\" onsubmit=\"cargar_datos( 'id=saludo', 'area_box', 'POST', 'nombre:mensaje' );\" enctype=\"multipart/form-data\">";
     echo "Nombre: <input type=\"text\" name=\"nombre\" id=\"nombre\">";
     echo "Mensaje:<br>";
     echo "<textarea name=\"mensaje\" id=\"mensaje\"></textarea><br>";
     echo "<input type=\"file\" name=\"imagen\" id=\"imagen\"><br>";
     echo "<input type=\"submit\" value=\"Enviar\" onsubmit=\"cargar_datos( 'id=saludo', 'area_box', 'POST', 'nombre:mensaje' );\">";
echo "</form>";

echo "</div>";
?>
</body>
</html>

AJAX.PHP

Código (php) [Seleccionar]

<?php
if( !strcmp( $_GET["id"], "saludo" ) )
     {
     //gracias a la funcion de AJAX que tenemos, podremos enviar variables y tratarlas como POST directamente

     echo "Tu nombre: ". $_POST["nombre"];
     echo "<br>Tu mensaje: ". $_POST["mensaje"];
     
     //como imprimo el nombre de la imagen ??
     echo "<br>Nombre de la Imagen: ". $_FILES["imagen"]["name"];
     }
?>

CUAL ES MI PROBLEMA ??
Pues actualmente me he asurgido la necesidad de procesar un input tipo FILE, asi que no he dado con la manera correcta para procesar en AJAX un formulario pero en este caso, procesar el input file :S !!...

Alguna idea ??...

Diabliyo · 18 Agosto 2008, 22:31 PM

Alguna idea ???

Diabliyo · 19 Agosto 2008, 20:56 PM

Cita de: Diabliyo en 18 Agosto 2008, 22:31 PM
Alguna idea ???

No doy como

...

coolfrog · 20 Agosto 2008, 01:51 AM

no se puede procesar con AJAX el < input type="file">, ya lo intente y no lo consegui, lo mas que consegui es hacerlo con flash que imita a ajax al subir un archivo. Pero te dejo este enlace donde hay infor de ajaxfileuploader.
Saludos.

Test Foro de elhacker.net SMF 2.1

Como procesar campos de formulario con AJAX !!

Diabliyo

Diabliyo

Diabliyo

coolfrog