[SOLUCIONADO] Problema con AJAX

xSkArx · #1 (**permalink**) 09/12/2013, 08:25

Hola a todos, estoy haciendo un "ejercicio propio" con ajax, pero tengo un ptoblema que no logro identificar, tengo un "mini" formulario con dos input text y un select, el problema es que no me devuelve nada, bueno aqui va el codigo

Código HTML:

Ver original<html>
<head>
<title>Pruebas AJAX y POO</title>
<script type="text/javascript"> 
function calcular() { 
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp = new XMLHttpRequest(); 
} else { // code for IE6, IE5 
xmlhttp = new ActiveXObject("Microsoft.XMLHTT P"); 
}
xmlhttp.onreadystatechange = function() { 
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv" ).innerHTML = xmlhttp.responseText; 
} 
}
var var1=document.getElementById('var1').value;
var var2=document.getElementById('var2').value;
var e = document.getElementById("operacion"); 
var strUser = e.options[e.selectedIndex].text ;
xmlhttp.open("POST", "controller.php", true); 
xmlhttp.send("?var1="+var1+"&var2="+var2+"&operator="+strUser"); 
} 
</script>
</head>
<body>
<form>
<input type="text" id="var1" />
<select name"operacion" id=" operacion">
<option value"sumar">sumar</option>
</select>
<input type="text" id="var2" />
<br>
<input type="submit" value="Calcular" onclick="calcular()" />
</form>
<br>
<div id="myDiv"></div>
</body>
</html>

El archivo controller.php funciona bien, lo he ptobado solo con suma

PHPeros · #2 (**permalink**) 09/12/2013, 09:50

Cuidado al concatenar:

Código:

xmlhttp.send("?var1="+var1+"&var2="+var2+"&operator="+strUser);

La última comilla sobra.

xSkArx · #3 (**permalink**) 09/12/2013, 10:07

Cita:

Iniciado por PHPeros

Cuidado al concatenar:

Código:

xmlhttp.send("?var1="+var1+"&var2="+var2+"&operator="+strUser);

La última comilla sobra.

Eso ya lo arregle pero aun asi no me trae los datos

Dalam · #4 (**permalink**) 09/12/2013, 10:17

Solo como una pregunta.
Si lo que quieres es sumar los valores, por que no los procesas con javascript directamente, y asi no tienes que estar mandando los datos a procesar?

xSkArx · #5 (**permalink**) 09/12/2013, 10:39

Es que mi idea es aprender a enviar datos con ajax, lo de sumar es solo para ejercitarme, ya despues le dare otros usos.

mortiprogramador · #6 (**permalink**) 09/12/2013, 11:05

<saludos>
1. En el select hay temas a mejorar
- El name no tiene el = (pero aún así funciona)
- El id tiene espacio (al tener espacio, en la función calcular la variable e no tiene valor)
- El value del option no tiene el = (pero aún así funciona)
2. En la función calcular, en el primer else, hay espacio entre las TT y la P
3. Al hacer el innerHTML hay espacio en el "myDiv" y el paréntesis final (pero aún así funciona)
4. Usando GET en vez de POST, y enviando el send sin parámetros

Código Javascript:

Ver originalxmlhttp.open("GET","controller.php?var1="+var1+"&var2="+var2,true);
xmlhttp.send();

5. Si se quiere por post, usar esto

Código Javascript:

Ver originalxmlhttp.open("POST", "controller.php", true);    
    //linea necesaria para que se interpreten los datos de post    
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        //ojo, no va el ? pues de lo contrario var1 se "pierde"
    xmlhttp.send("var1="+var1+"&var2="+var2+"&operator="+strUser);

</saludos>

Dalam · #7 (**permalink**) 09/12/2013, 11:25

xSkArx con los cambios que te dijo mortiprogramador tendria que redirigirte el formulario, para evitar eso tienes dos opciones.

1- Utilizando el preventDefault para que el formulario no sea enviado.
2- Quitando las etiquetas del form, puesto que no es utilizado.

La segunda opcion es la mas acertada en este caso, por que no utilizas el formulario para ser enviado, y si el cliente no tiene javascript activado, no sera redireccionado a ninguna pagina y todo se quedara como esta.

Te aconsejo que separes el objeto xmlhttp de el resto de funciones para que puedas usar la funcion si tienes mas de una peticion a paginas distintas.
Por ejemplo de esta forma:

Código Javascript:

Ver originalfunction objetus(file){
 
    xmlhttp=false;
    this.AjaxFailedAlert = "Su navegador no soporta las funcionalidades de este sitio y podria experimentarlo de forma diferente a la que fue pensada. Por favor habilite javascript en su navegador para verlo normalmente.\n";
    this.requestFile = file;
    this.encodeURIString = true;
    this.execute = false;
    if (window.XMLHttpRequest){
        this.xmlhttp = new XMLHttpRequest();
        if (this.xmlhttp.overrideMimeType){
            this.xmlhttp.overrideMimeType('text/xml');
        }
    }else if (window.ActiveXObject){ // IE
        try{
            this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e){
            try{
                this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }catch (e){
                this.xmlhttp = null;
            }
        }
        if (!this.xmlhttp && typeof XMLHttpRequest!='undefined'){
            this.xmlhttp = new XMLHttpRequest();
            if (!this.xmlhttp){
                this.failed = true;
            }
        }
    }
    return this.xmlhttp ;
}

mortiprogramador · #8 (**permalink**) 09/12/2013, 11:31

<saludos>
Eh!! si!! yo cambié el submit por un button!
</saludos>

xSkArx · #9 (**permalink**) 09/12/2013, 14:17

Gracias por la ayuda brindad, hice los arreglos que comento mortiprogramador y quite la etiqueta form como dijo Dalam. Ahora funciona bien, solo me queda validar los datos pero eso es otro cuento, gracias a todos.