Tema: Ajax por POST : no encuentro error :-P
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 22/06/2014, 09:03
Avatar de Italico76
Italico76
 
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 17 años
Puntos: 292
Ajax por POST : no encuentro error :-P
Buenas compañeros:

Me estoy poniendo en tema con "Ajax" y por GET "cero problemas" pero por POST hay algo que estoy haciendo mal pero no me arroja error alguno

Posteare primero la version via GET (ok)

Código Javascript: 
Ver original
  1. <html>
  2. <body>
  3.  
  4. <form name="personal" action="../pruebas/ajax_recibe.php" id="personal1">
  5.     Edad: 
  6.     <input type="text" id="edad" onchange="ajaxByGet();"/> <br />
  7.     Peso: 
  8.     <input type="text" id="peso" onchange="ajaxByGet();" /><br />
  9.     Sexo: 
  10.     <select id="sexo" onchange="ajaxByGet();">
  11.         <option value="m">M</option>
  12.         <option value="f">F</option>
  13.     </select>   
  14. </form>
  15.  
  16. <div id="outputAjax">Resultados del lado del servidor</div>
  17.  
  18.  
  19. <script>
  20.  
  21. var edad_el     = document.getElementById('edad'),
  22.     peso_el     = document.getElementById('peso'),
  23.     sexo_el     = document.getElementById('sexo'),
  24.     frm         = document.getElementById('personal1'),
  25.     outputAjax  = document.getElementById('outputAjax');
  26.  
  27. function ajaxPrepare(){     
  28.     try{
  29.         // Opera 8.0+, Firefox, Safari
  30.         ajaxRequest = new XMLHttpRequest();
  31.     } catch (e){
  32.         // Internet Explorer
  33.         try{
  34.             ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
  35.         } catch (e) {
  36.             try{
  37.                 ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
  38.             } catch (e){                
  39.                 alert("Error en Ajax");
  40.                 return false;
  41.             }
  42.         }
  43.     }       
  44.     
  45.     // registro funcion para Ajax
  46.     ajaxRequest.onreadystatechange = function()
  47.     {
  48.         if(ajaxRequest.readyState == 4  && ajaxRequest.status == 200 ){ 
  49.             outputAjax.innerHTML = ajaxRequest.responseText;
  50.         }
  51.     }
  52. }
  53.  
  54. function ajaxByGet()
  55. {
  56.  
  57. var edad = edad_el.value,
  58.     peso = peso_el.value,
  59.     sexo = sexo_el.value;
  60.  
  61.     var params = "?edad=" + edad + "&peso=" + peso + "&sexo=" + sexo;
  62.     ajaxRequest.open("GET", frm.action + '?' + params, true);
  63.     ajaxRequest.send(null); 
  64. }
  65.  
  66. // inicializo ajaxRequest
  67. ajaxPrepare();
  68.  
  69. // Registro cambios en elementos deel formulario: onChange
  70. document.getElementById('personal1').addEventListener("change", function (event)
  71. {
  72.     var tagname = event.target.tagName;
  73.     
  74.     if (tagname == 'INPUT' || tagname == 'SELECT' || tagname == 'TEXTAREA')
  75.     {
  76.         ajaxByGet();        
  77.     }
  78. });
  79.  
  80. // Registro cambios en elementos deel formulario: onKeyup
  81. document.getElementById('personal1').addEventListener("keyup", function (event)
  82. {
  83.     var tagname = event.target.tagName;
  84.     
  85.     if (tagname == 'INPUT' || tagname == 'TEXTAREA')
  86.     {
  87.         ajaxByGet();        
  88.     }
  89. });
  90.  
  91. </script>
  92.  
  93.  
  94. </body>
  95. </html>
  96. </html>


Ahora la conflictiva por POST:

Código Javascript: 
Ver original
  1. <html>
  2. <body>
  3.  
  4. <form name="personal" action="../pruebas/ajax_recibe.php" id="personal1">
  5.     Edad: 
  6.     <input type="text" id="edad" onchange="ajaxByPost();"/> <br />
  7.     Peso: 
  8.     <input type="text" id="peso" onchange="ajaxByPost();" /><br />
  9.     Sexo: 
  10.     <select id="sexo" onchange="ajaxByPost();">
  11.         <option value="m">M</option>
  12.         <option value="f">F</option>
  13.     </select>   
  14. </form>
  15.  
  16. <div id="outputAjax">Resultados del lado del servidor</div>
  17.  
  18.  
  19. <script>
  20.  
  21. var edad_el         = document.getElementById('edad'),
  22.     peso_el         = document.getElementById('peso'),
  23.     sexo_el         = document.getElementById('sexo'),
  24.     frm             = document.getElementById('personal1'),
  25.     outputAjax  = document.getElementById('outputAjax');
  26.  
  27. function ajaxPrepare(){     
  28.     try{
  29.         // Opera 8.0+, Firefox, Safari
  30.         ajaxRequest = new XMLHttpRequest();
  31.     } catch (e){
  32.         // Internet Explorer
  33.         try{
  34.             ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
  35.         } catch (e) {
  36.             try{
  37.                 ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
  38.             } catch (e){                
  39.                 alert("Error en Ajax");
  40.                 return false;
  41.             }
  42.         }
  43.     }       
  44.     
  45.     // registro funcion para Ajax
  46.     ajaxRequest.onreadystatechange = function()
  47.     {
  48.         if(ajaxRequest.readyState == 4  && ajaxRequest.status == 200 ){ 
  49.             outputAjax.innerHTML = ajaxRequest.responseText;
  50.         }
  51.     }           
  52. }
  53.  
  54. function ajaxByPost(){
  55.  
  56. var edad    = encodeURIComponent(edad_el.value),
  57.     peso    = encodeURIComponent(peso_el.value),
  58.     sexo    = encodeURIComponent(sexo_el.value);
  59.  
  60.     var params = "?edad=" + edad + "&peso=" + peso + "&sexo=" + sexo;
  61.     ajaxRequest.open("POST", frm.action, true); 
  62.     
  63.     ajaxRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  64.     ajaxRequest.send(params); 
  65. }
  66.  
  67. // inicializo ajaxRequest
  68. ajaxPrepare();
  69.  
  70. // Registro cambios en elementos deel formulario: onChange
  71. document.getElementById('personal1').addEventListener("change", function (event)
  72. {
  73.     var tagname = event.target.tagName;
  74.     
  75.     if (tagname == 'INPUT' || tagname == 'SELECT' || tagname == 'TEXTAREA')
  76.     {
  77.         ajaxByPost();       
  78.     }
  79. });
  80.  
  81. // Registro cambios en elementos deel formulario: onKeyup
  82. document.getElementById('personal1').addEventListener("keyup", function (event)
  83. {
  84.     var tagname = event.target.tagName;
  85.     
  86.     if (tagname == 'INPUT' || tagname == 'TEXTAREA')
  87.     {
  88.         ajaxByPost();       
  89.     }
  90. });
  91.  
  92. </script>
  93.  
  94.  
  95. </body>
  96. </html>
  97. </html>

Gracias desde ya
__________________
Salu2!