elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Arreglado, de nuevo, el registro del warzone (wargame) de EHN


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web
| | |-+  PHP (Moderador: #!drvy)
| | | |-+  Como procesar campos de formulario con AJAX !!
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Como procesar campos de formulario con AJAX !!  (Leído 5,917 veces)
Diabliyo


Desconectado Desconectado

Mensajes: 1.441


shell# _


Ver Perfil WWW
Como procesar campos de formulario con AJAX !!
« en: 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
  1. //Funcion para obtener conector AJAX
  2. function ajax()
  3. {
  4. var pagina=false; //conector ajax
  5.  
  6. if( window.XMLHttpRequest ) //Navegador Firefox
  7. pagina= new XMLHttpRequest(); //creamos objeto para el navegador
  8. else if( window.ActiveXObject ) //Navegador Internet Explorer
  9. {
  10. try //Version Actual
  11. {
  12. pagina= new ActiveXObject( "Msxml2.XMLHTTP" ); //creamos objeto para el navegador
  13. }
  14. catch(e) //version Antigua
  15. {
  16. try
  17. {
  18. pagina= new ActiveXObject( "Microsoft.XMLHTTP" ); //creamos objeto para el navegador
  19. }
  20. catch(e)
  21. {
  22. }
  23. }
  24. }
  25. return pagina;
  26. }
  27.  
  28. //El argunmento 'vars' contiene las variables que procesara la hoja AJAX.PHP
  29. //El argumento 'capaview' es la capa en donde escribiremos los resultados
  30. //El argumento 'flujoddatos; indica el flujo: GET o POST
  31. //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...)
  32. function cargar_datos( vars, capaview, flujoddatos, varsform )
  33. {
  34. var conector, capa, url;
  35.  
  36. url= 'ajax.php'; //mis funciones para ajax
  37. capa= document.getElementById(capaview); //capa
  38.  
  39. conector= ajax(); //funcion que crea el objeto ajax para el navegador
  40. conector.open( flujoddatos, url+'?'+vars, true ); //abrimos el flujo de datos
  41. conector.onreadystatechange= function() //funcion que indica estado y responde
  42. {
  43. if( conector.readyState==1 ) //cargando
  44. {
  45. capa.innerHTML= "<center><img src='imagenes/loading.gif'><br><b>CARGANDO...</b></center>";
  46. }
  47. else if( conector.readyState==4 ) //proceso completado
  48. {
  49. if( conector.status==200 ) //completado con exito
  50. {
  51. if( varsform!=0 ) //si estamos procesado variables de un formulario, establecemos Request
  52. conector.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
  53. capa.innerHTML= conector.responseText;
  54. }
  55. else if( conector.status==404 ) //no se encontro hoja
  56. {
  57. capa.innerHTML= "<center><img src='imagenes/404.png'></center>";
  58. }
  59. else //error
  60. {
  61. capa.innerHTML= conector.status;
  62. }
  63. }
  64. }
  65.  
  66. if( varsform!=0 ) //si el argumento es distinto de 0, entonces estamos enviando trama de variables
  67. {
  68. var myarr= varsform.split(':'); //dividimos
  69. var trama=""; //establecemos
  70. var i=0; //contador de ciclo
  71.  
  72. for( i=0; i<(myarr.length); i++ ) //ciclo
  73. {
  74. if( i>0 )
  75. trama += "&";
  76. trama += myarr[i]+"="+document.getElementById(myarr[i]).value;
  77. }
  78.  
  79. conector.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" ); //establecemos request
  80. conector.send(trama); //enviamos la trama
  81. }
  82. else
  83. conector.send(null); //enviamos NULL en caso que solo se procesan variables normales
  84. }

INDEX.PHP
Código
  1. <html>
  2. <head>
  3. <title>Proceando Formulario con AJAX dentro de la hoja comun</title>
  4. <script language="javascript" type="text/javascript" src="script.js"></script>
  5. </head>
  6.  
  7. <body>
  8. <?php
  9. echo "<div id=\"area_box\">";
  10.  
  11. echo "<form action=\"#\" method=\"POST\" onsubmit=\"cargar_datos( 'id=saludo', 'area_box', 'POST', 'nombre:mensaje' );\" enctype=\"multipart/form-data\">";
  12.     echo "Nombre: <input type=\"text\" name=\"nombre\" id=\"nombre\">";
  13.     echo "Mensaje:<br>";
  14.     echo "<textarea name=\"mensaje\" id=\"mensaje\"></textarea><br>";
  15.     echo "<input type=\"file\" name=\"imagen\" id=\"imagen\"><br>";
  16.     echo "<input type=\"submit\" value=\"Enviar\" onsubmit=\"cargar_datos( 'id=saludo', 'area_box', 'POST', 'nombre:mensaje' );\">";
  17. echo "</form>";
  18.  
  19. echo "</div>";
  20. ?>
  21. </body>
  22. </html>

AJAX.PHP
Código
  1. <?php
  2. if( !strcmp( $_GET["id"], "saludo" ) )
  3.     {
  4.     //gracias a la funcion de AJAX que tenemos, podremos enviar variables y tratarlas como POST directamente
  5.  
  6.     echo "Tu nombre: ". $_POST["nombre"];
  7.     echo "<br>Tu mensaje: ". $_POST["mensaje"];
  8.  
  9.     //como imprimo el nombre de la imagen ??
  10.     echo "<br>Nombre de la Imagen: ". $_FILES["imagen"]["name"];
  11.     }
  12. ?>

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 ??...


« Última modificación: 19 Agosto 2008, 20:32 pm por Diabliyo » En línea

Diabliyo


Desconectado Desconectado

Mensajes: 1.441


shell# _


Ver Perfil WWW
Re: Como procesar campos de formulario con AJAX !!
« Respuesta #1 en: 18 Agosto 2008, 22:31 pm »

Alguna idea ???


« Última modificación: 19 Agosto 2008, 20:33 pm por Diabliyo » En línea

Diabliyo


Desconectado Desconectado

Mensajes: 1.441


shell# _


Ver Perfil WWW
Re: Como procesar campos de formulario con AJAX !!
« Respuesta #2 en: 19 Agosto 2008, 20:56 pm »

Alguna idea ???

No doy como :(...
En línea

coolfrog


Desconectado Desconectado

Mensajes: 324


Ver Perfil WWW
Re: Como procesar campos de formulario con AJAX !!
« Respuesta #3 en: 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.
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
3 campos con dropdown ajax. Help
PHP
DJmixmancar 0 2,382 Último mensaje 13 Enero 2011, 17:21 pm
por DJmixmancar
Formulario con efecto interesante de Etiquetas sobre los campos de texto
PHP
Graphixx 1 2,182 Último mensaje 22 Marzo 2012, 03:49 am
por Shell Root
[?][PHP]Procesar variable php de formulario
PHP
Jaes 2 2,291 Último mensaje 11 Enero 2013, 23:01 pm
por jdc
[Cerrado]Script imprime el código en lugar de procesar un formulario.
PHP
Mitsu 0 1,665 Último mensaje 9 Octubre 2013, 03:59 am
por Mitsu
Como se emplea el ajax en un formulario de Login?
Desarrollo Web
jesus1997 1 2,449 Último mensaje 12 Enero 2017, 04:12 am
por engel lex
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines