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

Italico76 · #1 (**permalink**) 22/06/2014, 09:03

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<html>
<body>
 
<form name="personal" action="../pruebas/ajax_recibe.php" id="personal1">
    Edad: 
    <input type="text" id="edad" onchange="ajaxByGet();"/> <br />
    Peso: 
    <input type="text" id="peso" onchange="ajaxByGet();" /><br />
    Sexo: 
    <select id="sexo" onchange="ajaxByGet();">
        <option value="m">M</option>
        <option value="f">F</option>
    </select>   
</form>
 
<div id="outputAjax">Resultados del lado del servidor</div>
 
 
<script>
 
var edad_el     = document.getElementById('edad'),
    peso_el     = document.getElementById('peso'),
    sexo_el     = document.getElementById('sexo'),
    frm         = document.getElementById('personal1'),
    outputAjax  = document.getElementById('outputAjax');
 
function ajaxPrepare(){     
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){                
                alert("Error en Ajax");
                return false;
            }
        }
    }       
    
    // registro funcion para Ajax
    ajaxRequest.onreadystatechange = function()
    {
        if(ajaxRequest.readyState == 4  && ajaxRequest.status == 200 ){ 
            outputAjax.innerHTML = ajaxRequest.responseText;
        }
    }
}
 
function ajaxByGet()
{
 
var edad = edad_el.value,
    peso = peso_el.value,
    sexo = sexo_el.value;
 
    var params = "?edad=" + edad + "&peso=" + peso + "&sexo=" + sexo;
    ajaxRequest.open("GET", frm.action + '?' + params, true);
    ajaxRequest.send(null); 
}
 
// inicializo ajaxRequest
ajaxPrepare();
 
// Registro cambios en elementos deel formulario: onChange
document.getElementById('personal1').addEventListener("change", function (event)
{
    var tagname = event.target.tagName;
    
    if (tagname == 'INPUT' || tagname == 'SELECT' || tagname == 'TEXTAREA')
    {
        ajaxByGet();        
    }
});
 
// Registro cambios en elementos deel formulario: onKeyup
document.getElementById('personal1').addEventListener("keyup", function (event)
{
    var tagname = event.target.tagName;
    
    if (tagname == 'INPUT' || tagname == 'TEXTAREA')
    {
        ajaxByGet();        
    }
});
 
</script>
 
 
</body>
</html>
</html>

Ahora la conflictiva por POST:

Código Javascript:

Ver original<html>
<body>
 
<form name="personal" action="../pruebas/ajax_recibe.php" id="personal1">
    Edad: 
    <input type="text" id="edad" onchange="ajaxByPost();"/> <br />
    Peso: 
    <input type="text" id="peso" onchange="ajaxByPost();" /><br />
    Sexo: 
    <select id="sexo" onchange="ajaxByPost();">
        <option value="m">M</option>
        <option value="f">F</option>
    </select>   
</form>
 
<div id="outputAjax">Resultados del lado del servidor</div>
 
 
<script>
 
var edad_el         = document.getElementById('edad'),
    peso_el         = document.getElementById('peso'),
    sexo_el         = document.getElementById('sexo'),
    frm             = document.getElementById('personal1'),
    outputAjax  = document.getElementById('outputAjax');
 
function ajaxPrepare(){     
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){                
                alert("Error en Ajax");
                return false;
            }
        }
    }       
    
    // registro funcion para Ajax
    ajaxRequest.onreadystatechange = function()
    {
        if(ajaxRequest.readyState == 4  && ajaxRequest.status == 200 ){ 
            outputAjax.innerHTML = ajaxRequest.responseText;
        }
    }           
}
 
function ajaxByPost(){
 
var edad    = encodeURIComponent(edad_el.value),
    peso    = encodeURIComponent(peso_el.value),
    sexo    = encodeURIComponent(sexo_el.value);
 
    var params = "?edad=" + edad + "&peso=" + peso + "&sexo=" + sexo;
    ajaxRequest.open("POST", frm.action, true); 
    
    ajaxRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    ajaxRequest.send(params); 
}
 
// inicializo ajaxRequest
ajaxPrepare();
 
// Registro cambios en elementos deel formulario: onChange
document.getElementById('personal1').addEventListener("change", function (event)
{
    var tagname = event.target.tagName;
    
    if (tagname == 'INPUT' || tagname == 'SELECT' || tagname == 'TEXTAREA')
    {
        ajaxByPost();       
    }
});
 
// Registro cambios en elementos deel formulario: onKeyup
document.getElementById('personal1').addEventListener("keyup", function (event)
{
    var tagname = event.target.tagName;
    
    if (tagname == 'INPUT' || tagname == 'TEXTAREA')
    {
        ajaxByPost();       
    }
});
 
</script>
 
 
</body>
</html>
</html>

Gracias desde ya

PHPeros · #2 (**permalink**) 22/06/2014, 09:23

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

Código Javascript:

Ver originalvar params = "edad=" + edad + "&peso=" + peso + "&sexo=" + sexo;

Saludos

Italico76 · #3 (**permalink**) 22/06/2014, 10:08

@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