inicando con ajax

felipe12357 · #1 (**permalink**) 17/11/2010, 16:27

HOloa hasta ahora estoy muy biche con ajax me gustaria q me aconsejaran algunos buenos tutoriales en ESPECIAL necesito algo parecido a un Boton contador, q un usuario le de click a un boton y una variable se incremente y deacuerdo al numero q tenga esa variable yo pueda desplegar determinada informacion de la base de datos.

hasta ahora tengo buen conocimiento en PHP, pero no se como integrar esto con ajax!

espero me puedan colaborar, muchas Gracias!!

chicohot20 · #2 (**permalink**) 17/11/2010, 20:20

Creo que en Google hubieras encontrado una repuesta mas rapida, en vez de estar esperando una respuesta en este foro. hay varios tutoriales.

felipe12357 · #3 (**permalink**) 18/11/2010, 07:24

ya he buscado y he aprendido un poco de ajax, pero no he encontrado aun algo similar a lo q estoy tratando de encontrar

chicohot20 · #4 (**permalink**) 18/11/2010, 07:49

Bueno no se si lo quieres asi, si no me lo hace saber.
En el ejemplo utilizo Jquery.

ejemplo.html

Código HTML:

Ver original<html>
    <head>
        <title>Ejemplon</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    </head>
        <script type="text/javascript">
        var variable=0;
            $( function (){
                $("#variable").html(variable);
                $("#enviar").click( function (){
                    variable++;
                    $("#variable").html(variable);
                    $.ajax({
                      url: "pagina.php",
                      contentType:"application/x-www-form-urlencoded; charset=utf-8",
                      type:"POST", 
                      data: "variable="+variable,
                      error: function(){
                       alert('Error');
                      },
                      success: function(data){
                          alert(data);
                          //data es lo que te devuelve pagina.php
                       }
                    });
                });
                
            });
        </script>
    <body>
        <span id="variable"></span>
        <button id="enviar">Enviar</button>
 
    </body>
</html>

pagina.php

Código PHP:

Ver original<?php
$var=$_POST['variable']; 
 
echo $var;
 
?>

felipe12357 · #5 (**permalink**) 18/11/2010, 08:31

Si es lo q necesito pero tengo un problema en el codigo php lo modifique de la siguiente forma:

<?php

$var=$_POST['variable'];

echo $var;
$prueba=$var*5;
echo $prueba;
?>
sin embargo no me imprime la variable prueba, porq?

chicohot20 · #6 (**permalink**) 18/11/2010, 08:38

no imprimas $var, solamente lo que necesitas visualizar en este caso $prueba;

Código PHP:

Ver original<?php
 
$var=$_POST['variable'];
$prueba=$var*5;
echo $prueba;
?>

felipe12357 · #7 (**permalink**) 18/11/2010, 09:26

Existe alguna forma de q imprima la variable $prueba en la misma pagina y no en este alert, lo intente haciendo con document.write, pero si hago esto desaparece el boton,
quiero q dependiendo del numero de click se despliegue cierta informacion en la misma pagina.

Muchas Gracias por toda tu ayuda

chicohot20 · #8 (**permalink**) 18/11/2010, 09:34

Claro que si, usas la funcion html(). En el ejemplo estoy imprimiendo en el DIV con id "resultado" lo que me devuelve pagina.php

Código HTML:

Ver original<html>
    <head>
        <title>Ejemplon</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    </head>
        <script type="text/javascript">
        var variable=0;
            $( function (){
                $("#variable").html(variable);
                $("#enviar").click( function (){
                    variable++;
                    $("#variable").html(variable);
                    $.ajax({
                      url: "pagina.php",
                      contentType:"application/x-www-form-urlencoded; charset=utf-8",
                      type:"POST", 
                      data: "variable="+variable,
                      error: function(){
                       alert('Error');
                      },
                      success: function(data){
                          $("#resultado").html("<b>Valor recibido de pagina.php:</b> "+data);
                          //data es lo que te devuelve pagina.php
                       }
                    });
                });
                
            });
        </script>
    <body>
        <span id="variable"></span>
        <button id="enviar">Enviar</button>
        <div id="resultado"></div>
 
    </body>
</html>

felipe12357 · #9 (**permalink**) 18/11/2010, 09:48

Eso era justo lo q yo estaba buscando, Muchas gracias!!

por lo poquito q se de ajax el utiliza este objeto para lograr la comunicacion asicrona:
XMLHttpRequest(); y otras funciones.

No veo nada de eso, no sabia q se podia comunicar php y javascript por medio de jquery, muchas gracias nuevamente, por ultimo me gustaria q me recomendaras algun tutorial sobre esto

Gracias nuevamente

chicohot20 · #10 (**permalink**) 18/11/2010, 10:00

ajax viene incorporado en Jquery, asi que el objeto XMLHttpRequest() esta dentro de Jquery.

Un tutorial? Bueno generalmente yo me leo la documentación oficial disponible en jquery.com
o tambien puedes visitar: http://www.visualjquery.com/

felipe12357 · #11 (**permalink**) 18/11/2010, 14:29

HOla q pena molestar de nuevo pero me surgio un problema, luego de tener los datos, los voy a procesar con un formulario pero entonces pierdo el valor q llevo en mi contador!!!