Jquery: Interactuando PHP con elementos sin recargar

Categories: AJAX, javascript - Tags: ,

Para entender este tutorial es necesario tener una mínima base de PHP y Jquery, además de haber leido este otro tutorial. Una vez que tengas todo eso claro vamos a ver como hacer que javascript responda según la respuesta que de el script PHP.


Este script se podría utilizar para verificar si un dato ha sido actualizado, verificar si encontró un registro, etc, etc. Yo por una cuestión de mantener simple el ejemplo voy a hacer que script.php genere un número aleatorio entre el 1 y el 20, si el número generado es mayor a 10 mostrará un mensaje (ganaste), de lo contrario mostrará otro mensaje, si en vez de ese else no pongo nada pues simplemente no se actualizará el DIV. Tengamos en mente que no sólo puede actualizarse un DIV es posible mostrar mensajes, cargar formularios y hacer cualquier cosa que javascript y nuestra imaginación permita.

miscript.php

1
2
3
4
5
6
<?php
/// aqui puedo hacer invocaciones a la base de datos o lo que se me ocurra
$minumero=rand(1,20);
/// retorno una respuesta
echo $minumero;
?>

Mi codigo javascript

Luego de invocar a jquery, necesitariamos el sgte. código:

1
2
3
4
5
6
7
8
9
10
11
function recargar(){   
    var variable_post="Mi texto recargado";
    $.post("miscript.php", { variable: variable_post }, function(data){
        //// Verificamos la rpta entregada por miscript.php
        if (data>10) {
            $("#recargado").html('Has ganado con un puntaje de: '+data);
        } else {
            $("#recargado").html('Has perdido con un puntaje de: '+data);
        }  
    });        
}

Observación 1: Si fuera una invocación a la base de datos puedes enviarle a javascript un valor boolena true/false para saber si se encontraron resultados.

Observación 2: Esto funciona bien con respuestas simples, si requiero devolver varias variables lo mejor es enviarlas como cadena y luego parsearlas algo como: mivariable1=algo&mivariable2=algo&mivariable3=algo… pero si necesitas recoger un gran volumen de datos como retorno lo ideal sería obtener una respuesta XML o JSON



6 Responses to Jquery: Interactuando PHP con elementos sin recargar

  1. Actualizar un elemento sin recargar con jquery | Miguel Manchego says:

    [...] Update //////// Para ver como realizar una acción según la respuesta que dé PHP pueden ver este tutorial // under: AJAX Tags: AJAX, jquery Digg it Add to del.icio.us Stumble it add to [...]

  2. fido-strike says:

    Buenicimo tio, me serviste de mucho para poder mostrar los resultados de mis artistas de mi web!

    saludos.

  3. NQuintero says:

    Hola.

    Soy nuevo en esto de programar para WEB con PHP y tu blog me ha sido de gran ayuda. Sin embargo tengo un problema que no he podido resolver y me gustaría saber si me puedes dar alguna guia.

    En mi página tengo un área de menu usando links. Cuando se hace click sobre alguno de ellos se despliega un formulario (Creado usando el módulo HTML_QuickForm) que tiene campos variables (Dependiendo del link seleccionado se muestras unos u otros).

    Mi problema es que cuando trato de usar JQuery para programar una acción cuando se haga click en el boton Submit no esta ejecutando la acción asociada. Valide que el id de la forma estuviera bien referenciado como indicabas en otro blog (\

  4. gaboarkkangel says:

    Buenas tardes, excelente bloc e interesante post, no soy un experto en ajax pero e interpretado bien el código hasta lo adapte a un requerimiento que tengo en un website que estoy haciendo. Me interesaria saber si yo utilizo un select para mostrar una información sin recargar la página y luego de que me muestre lo que me interesa, adicionalmente puedo por ejemplo dar a otro elemento como una casilla de verificación para filtrar más lo que quiero que me muestre no se si me explico. Gracias de ante manos

  5. admin says:

    Si, todo eso se puede hacer, la explicación de como es un poco extensa pero básicamente debes buscar en la documentación de jquery como seleccionar attributos, el evento onclick y append para incluir elementos adicionales

  6. Luis M. Teijón says:

    Hola, mi página PHP devuelve un objeto JSON, como hago para imprimir cada uno de sus atributos??

Leave a Reply

Your email address will not be published. Required fields are marked *

*


8 + two =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>