Foros del Web » Programando para Internet » Javascript »

[Ajax] Generalizacion POST / GET y envio a multiples formularios en la misma pagina

Estas en el tema de [Ajax] Generalizacion POST / GET y envio a multiples formularios en la misma pagina en el foro de Javascript en Foros del Web. Buenas La siguiente abstraccion permite cambiar facilmente entre un envio por GET o POST y enviar a multiples formularios (2 ó mas) en la misma ...
  #1 (permalink)  
Antiguo 22/06/2014, 23:32
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 17 años, 6 meses
Puntos: 292
Información [Ajax] Generalizacion POST / GET y envio a multiples formularios en la misma pagina

Buenas

La siguiente abstraccion permite cambiar facilmente entre un envio por GET o POST y enviar a multiples formularios (2 ó mas) en la misma pagina de forma muy sencilla.

Functiones provistas:

ajaxByPost(object, ajaxHandler, action, async)
ajaxByGet(object, ajaxHandler, action, async)
queryBuilder(obj,encode) -- usada por las primeras dos--

Se pueden contruir ejemplos muchisimo mas simples a partir de las mismas funciones basicas pero se dio un ejemplo de complejidad media para poder evaluar que pueden hacer.


Veamos un ejemplo:

Código HTML:
Ver original
  1.  
  2. <!-- Implementacion de funciones para el manejo simple de Ajax -->
  3.  
  4. <h3>Paciente</h3>
  5.  
  6. <form name="consulta" action="../pruebas/ajax_recibe.php" id="consulta">   
  7.     Edad:<br/>
  8.     <input type="text" id="edad" /> <br />
  9.     Peso:<br/>
  10.     <input type="text" id="peso" /><br />
  11.     Altura: <br/>
  12.     <input type="text" id="altura" /><br />
  13.     Sexo:<br/>       
  14.     <select id="sexo">
  15.         <option value="masculino">M</option>
  16.         <option value="femenino">F</option>
  17.     </select>  
  18. </form>
  19.  
  20. <div id="outputAjaxForm1"></div>
  21.  
  22. <h4>Cobertura en Salud</h4>
  23. <form name="costos" action="../pruebas/ajax_recibe.php" id="costos">
  24.     <select id="cobertura">
  25.         <option value="Sisben">Sisben</option>
  26.         <option value="EPS">EPS</option>
  27.         <option value="Prepagada">Prepagada</option>
  28.     </select>  
  29. </form>
  30. <div id="outputAjaxForm2"></div>


y Justo antes de </BODY> ..

Código Javascript:
Ver original
  1. window.onload = function ()
  2. {
  3.  
  4.     /*
  5.         Registro de eventos para los formularios
  6.     */
  7.    
  8.     // Form2
  9.     document.getElementById('costos').addEventListener("change", function (event)
  10.     {                              
  11.         fieldsForm2[event.target.id = event.target;                            
  12.         ajaxByGet('costos',fieldsForm2,'outputfieldsForm2');   
  13.     });
  14.    
  15.    
  16.     // Form1
  17.     form1Handler =  function (e)
  18.     {  
  19.         var id              = e.target.id;             
  20.         fieldsForm1[id]     = e.target;
  21.                
  22.         ajaxByPost('consulta',fieldsForm1,'outputfieldsForm1');            
  23.     };
  24.    
  25.     // Generalizo porque tengo varios eventos asociados al mismo formulario
  26.     document.getElementById('consulta').addEventListener("change", function(){form1Handler(event);});
  27.     document.getElementById('consulta').addEventListener("keyup", function(){form1Handler(event);});
  28.    
  29.  
  30. }

Y las funciones que lo hacen posible y van justo encima de este ultimo JS son:

Código Javascript:
Ver original
  1. // Creo objetos literales (o arrays) donde almaceno referencia a campos que deseo enviar
  2. var fieldsForm1 = {},
  3.     fieldsForm2 = {};  
  4.            
  5. /*
  6.     Construye query para Ajax
  7.    
  8.     @param objeto literal con las referencias a los elementos del formulario
  9.     @return query de la forma "edad= + edad + &peso= + peso + ..."
  10. */ 
  11. function queryBuilder(o,encode)
  12. {
  13.     encode = encode || false;
  14.    
  15.     var params='',
  16.         c=0,
  17.         val;       
  18.    
  19.     for (prop in o)
  20.     {      
  21.         if (prop == '__form__')
  22.             val = o[prop];                     
  23.         else   
  24.             val = encode ? o[prop].value : encodeURIComponent(o[prop].value);
  25.        
  26.         if (c==0)
  27.             params += prop+'='+val;
  28.         else   
  29.             params += '&'+prop+'='+val
  30.            
  31.         c++;
  32.     }  
  33.     return params;   
  34. }          
  35.    
  36.    
  37.     function ajaxRequestObjectBuilder()
  38.     {    
  39.     var object;
  40.    
  41.     try{
  42.         // Opera 8.0+, Firefox, Safari
  43.         object = new XMLHttpRequest();
  44.     } catch (e){
  45.         // Internet Explorer
  46.         try{
  47.             object = new ActiveXObject("Msxml2.XMLHTTP");
  48.         } catch (e) {
  49.             try{
  50.                 object = new ActiveXObject("Microsoft.XMLHTTP");
  51.             } catch (e){                
  52.                 alert("Error en Ajax");
  53.                 return false;
  54.             }
  55.         }
  56.        
  57.     }          
  58.     return object;
  59.     }
  60.  
  61.  
  62.  
  63. /*
  64.     @param objeto literal con referencia a los elementos del formulario
  65.     @param action (url to submit)
  66.     @param async
  67. */
  68. function ajaxByPost(formName,object,insertionElementId,async){
  69.  
  70.     async               = async     || true;
  71.     object.__form__     = formName;
  72.        
  73.     var action          = document.getElementById(formName).action,
  74.         params          = queryBuilder(object,true),
  75.         ajaxRequest     = ajaxRequestObjectBuilder(),  
  76.         insertionElement= document.getElementById(insertionElementId);
  77.        
  78.     // registro funcion para Ajax
  79.     ajaxRequest.onreadystatechange = function()
  80.     {
  81.         if(ajaxRequest.readyState == 4  && ajaxRequest.status == 200 ){
  82.             insertionElement.innerHTML = ajaxRequest.responseText;
  83.         }
  84.     }      
  85.        
  86.     ajaxRequest.open("POST", action, async);   
  87.     ajaxRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  88.     ajaxRequest.send(params);
  89. }
  90.  
  91.  
  92.  
  93. /*
  94.     @param objeto literal con referencia a los elementos del formulario
  95.     @param action (url to submit)
  96.     @param async
  97. */
  98. function ajaxByGet(formName,object,insertionElementId,async){
  99.  
  100.     async               = async     || true;   
  101.     object.__form__     = formName;
  102.    
  103.     var action          = document.getElementById(formName).action,
  104.         params          = queryBuilder(object,false),
  105.         ajaxRequest     = ajaxRequestObjectBuilder(),  
  106.         insertionElement= document.getElementById(insertionElementId);
  107.    
  108.     // registro funcion para Ajax
  109.     ajaxRequest.onreadystatechange = function()
  110.     {
  111.         //console.log ('Dentro de onreadystatechange');
  112.         if(ajaxRequest.readyState == 4  && ajaxRequest.status == 200 ){
  113.             insertionElement.innerHTML = ajaxRequest.responseText;
  114.         }
  115.     }      
  116.    
  117.     ajaxRequest.open("GET", action + '?' + params,  async);    
  118.     ajaxRequest.send(null);
  119. }

y del lado del servidor he elegido PHP:

Código PHP:
Ver original
  1. <?php  
  2. /*
  3.     @author Pablo Bozzolo (italico76)
  4. */
  5.    
  6. /*
  7.     @param nombre del 'indice'
  8.     @param tipo de superglobal: POST, GET, FILES, COOKIES
  9. */
  10. function getRequest($name,$superglobal=NULL)
  11. {
  12.     if (empty($superglobal))       
  13.         return isset($_REQUEST[$name]) ? $_REQUEST[$name] : null;
  14.     if ($superglobal='POST')
  15.         return isset($_POST[$name]) ? $_POST[$name] : null;
  16.     elseif ($superglobal='GET' )
  17.         return isset($_GET[$name]) ? $_GET[$name] : null;  
  18. }
  19.  
  20. //var_dump($_REQUEST);
  21.  
  22. $form       =       getRequest('__form__');
  23. $edad       = (int) getRequest('edad');
  24. $peso       = (int) getRequest('peso');
  25. $altura     = (int) getRequest('altura');
  26. $sexo       =       getRequest('sexo');
  27. $cobertura  =       getRequest('cobertura');
  28.  
  29. /* Formulario #1 */
  30. if ($form=='consulta')
  31. {
  32.     if (!empty($peso) && !empty($altura))  
  33.         $imc =  round($peso / ($altura*$altura),4);
  34.     else
  35.         $imc = '--';
  36.  
  37.     echo "Edad $edad años,<br/>$sexo,<br/>altura $altura cm<br/> y peso $peso kg<p/>\n";    
  38.     echo "IMC = $imc<p/>\n";
  39. }
  40.  
  41. /* Formulario #2 */
  42. if ($form=='costos')
  43. {
  44.     echo "Prestadora de salud: $cobertura";  
  45. }


EDIT: fue *actualizado* ya que @Alexis88 me aviso de una falla (gracias Alexis!!)
__________________
Salu2!

Última edición por Italico76; 25/06/2014 a las 09:56

Etiquetas: ajax, formulario, formularios, html, input, multiples, php, post, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:44.