Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Ajax por POST : no encuentro error :-P

Estas en el tema de Ajax por POST : no encuentro error :-P en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 22/06/2014, 09:03
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 12 años, 5 meses
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!
  #2 (permalink)  
Antiguo 22/06/2014, 09:23
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 6 años
Puntos: 578
Respuesta: Ajax por POST : no encuentro error :-P

En POST, cuando utilizas el parámetro del método send debes excluir el símbolo "?" del query string:

Código Javascript:
Ver original
  1. var params = "edad=" + edad + "&peso=" + peso + "&sexo=" + sexo;

Saludos
  #3 (permalink)  
Antiguo 22/06/2014, 10:08
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 12 años, 5 meses
Puntos: 292
Respuesta: Ajax por POST : no encuentro error :-P

@PHPeros : hola amigo..... si.. lo leí y por eso en la version por GET puse el '?' aparte aunque lo puse tambien dentro del query (que distraido) y lo peor no lo hice para la version de POST

Ya he corregido esa distraccion pero AUN no funciona .... que sera ?


EDIT: no se como no lo vi..... estaba mirando $_GET en PHP ....... me quede con lo que estaba haciendo por GET antes

@PHPeros gracias por tu tiempo
__________________
Salu2!

Última edición por Italico76; 22/06/2014 a las 10:32

Etiquetas: ajax, encuentro, formulario, funcion, html, input, 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 02:47.