Mostrar resultado en un div con AJAX

fedefrankk · #1 (**permalink**) 19/06/2014, 17:21

Buenas a todos, estoy empezando con el tema de AJAX, de apoco,
lo que quiero hacer es mandar una variable cualquiera, con un formulario,
y con si se puede <a href ....>

tengo el siguiente codigo y no me funciona, (es sacado de internet y tocado por mi)

mi codigo

Código Javascript:

Ver original<script type="text/javascript">
            function estafuncion(str){
                var xmlhttp; 
                if (str=="")
                  {
                  document.getElementById("txtHint").innerHTML="";
                  return;
                  }
                if (window.XMLHttpRequest)
                  {// code for IE7+, Firefox, Chrome, Opera, Safari
                  xmlhttp=new XMLHttpRequest();
                  }
                else
                  {// code for IE6, IE5
                  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                  }
                xmlhttp.onreadystatechange=function()
                  {
                  if (xmlhttp.readyState==4 && xmlhttp.status==200)
                     {
                     document.getElementById("cliente").innerHTML=xmlhttp.responseText;
                     }
                  }
                  xmlhttp.open("GET",str,true);
                xmlhttp.send();
            }
        </script>
    </head>
    <body>
        <form action="02.php"  method="get" onsubmit="estafuncion(this.value)">
            Nombre:<input type="text" name="str" />
            <input type="submit" name="noss" />
            </form>
        <div id="cliente">

y el 02.php

Código PHP:

Ver original<? 
 
$name=$_GET['str'];
echo "esto es lo que mandaste". $name;
 
 
?>

Creo que para los que saben es sencillo,
todo lo que busco en google esta con jquery, pero primero quiero aprender un poco de ajax..

Bueno se agradece sus tiempo
saludos cordiales
fede

saludos

caricatos · #2 (**permalink**) 19/06/2014, 18:04

Hola:

Si usas un botón submit para peticiones Ajax, debes también cancelar el envío, y eso no se ve...

Otra cosa... el tag form no lleva el atributo value, así que al menos para tu caso creo que en vez de this.value como parámetro, debería ser: str.value.

Una última cosilla... el segundo parámetro de la petición, debería ser la url donde se procesará la petición...

Revisa esas cosillas, y cuéntanos tus progresos...

Edito: Para el método get creo que deberías paras los parámetros por url...

Saludos

Alexis88 · #3 (**permalink**) 19/06/2014, 18:15

Hola Federico

El problema está en que no envías un valor a la función, es decir, el formulario no tiene el atributo value como para que intentes enviar su valor, además, el valor de str en la función debe de ser el nombre del archivo hacia el cual enviarás los datos.

Yo te recomiendo hacerlo así:

Código HTML:

Ver original<form action="02.php">
    Nombre: <input type="text" name="str" />
    <input type="submit" />
</form>
<div id="cliente"></div>

Código Javascript:

Ver originalvar form = document.querySelector("form"),
    cliente = document.getElementById("cliente"),
    ajax = function(url, salida){
        var xhr = window.XMLHttpRequest ? 
                  new XMLHttpRequest() : 
                  new ActiveXObject("Microsoft.XMLHTTP") || 
                  new ActiveXObject("Msxml2.XMLHTTP");
    
        xhr.open("GET", url, true);
        xhr.onreadystatechange = function(){
            if (xhr.readyState == 4){
                switch (xhr.status){
                    case 200:
                        salida.innerHTML = xhr.responseText;
                        break;
                    case 404:
                        salida.innerHTML= "La dirección brindada no existe";
                        break;
                    default:
                        salida.innerHTML = "Se ha producido un error: " + xhr.status;
                        break;
                }
            }     
        };
        xhr.send(null);
    };
 
form.addEventListener("submit", function(event){
    event.preventDefault();
    ajax(
        this.action + "?str=" + this.str.value,
        cliente
    );
}, false);

Cuando envías los datos de un formulario a otro archivo para procesarlos, se produce el evento submit, el cual debo de cancelar para evitar que se haga la redirección, utilizando para ello el método preventDefault. Luego, ejecuto a la función ajax, a la cual le paso el nombre del archivo al que enviaré los datos (almacenado en el atributo action del formulario) concatenado con el valor escrito en la caja de nombre "str", además, envío el <div> en el que se mostrará el resultado.

En la función, creo el objeto xhr y procedo a realizar la petición asíncrona, mostrando el resultado en el <div>.

Me alegra ver que quieras aprender a hacer esto con código JS nativo antes que con una librería, créeme que aprenderás más.

Saludos

fedefrankk · #4 (**permalink**) 20/06/2014, 10:56

Hola Gracias a todos por responder, me pondre hacer ejemplos y cualquier duda vuelvo a preguntar se agradece la info...

Y si me gusta mas el codigo nativo de javascript ya que seria el padre del resto.

saludos nuevamente y gracias

fede

Italico76 · #5 (**permalink**) 21/06/2014, 15:00

Disculpa Alexis88 ...... podras explicarme una partecita de tu codigo ?

Código Javascript:

Ver originalajax(
        // GET
        this.action + "?str=" + this.str.value,  
        cliente // id del div id='cliente'
    );

He desmenusado esa parte.... y entiendo envias por GET el value del DIV con id='cliente' y tambien el value del form ?

Eso ultimo me tiene confundido porque que yo sepa un <form> no tiene atributo value y por otro lado ...

No podrias concatenar la variable cliente como parametro de esa URL (&cliente=...) ? o sea... por que viajan de forma distinta esos dos datos ?

GRACIAS DESDE YA por ayudarme a entender

Alexis88 · #6 (**permalink**) 21/06/2014, 16:55

Claro, el formulario no posee ese atributo, eso fue lo que le dije, pero si te fijas bien, yo hago esto:

Código Javascript:

Ver originalthis.str.value

Y no esto:

Código Javascript:

Ver originalthis.value

Hay una gran diferencia entre ambas líneas. La primera, busca en el formulario (representado por la palabra this) al elemento de nombre "str" y toma su valor. La segunda, busca el valor del formulario, algo que no existe.

Por otro lado, con this.action, tomo el nombre del archivo hacia el cual se enviarán los datos a procesar, indicado en el atributo action del formulario. La variable que se le concatena hace referencia al valor de uno de los elementos del formulario, que en este caso es el <input> de nombre "str".

Saludos

Italico76 · #7 (**permalink**) 21/06/2014, 17:09

Alexis88: muchas gracias ....respondiste a mi primera pregunta y estoy satisfecho con esa respuesta pero por que envias cliente fuera de la URL ?

Cita:

form.addEventListener("submit", function(event){
event.preventDefault();
ajax(
this.action + "?str=" + this.str.value,
cliente
);
}, false);

Alexis88 · #8 (**permalink**) 21/06/2014, 17:12

Porque es el segundo argumento que envío a la función Ajax, el cual representa al elemento de salida. No tiene por qué formar parte de la URL.

Saludos

Italico76 · #9 (**permalink**) 21/06/2014, 17:14

Alexis88 : te das cuenta que

- estas creando el objeto XMLHttpRequest o similar con cada evento (submit)[/B] ?

- Para un caso tan simple no justifica tampoco registrar una y otra vez la funcion para onreadystatechange

EDIT: me explicaste tus razones y tu implementacion esta PERFECTA!