martes, 30 de agosto de 2011

Llamar a una función PHP desde Jquery

Valencia, 30/08/2011 Gatsu

Buenas noches lectores nocturnos en cuyos pueblos no hay fiesta estos días (en el mio se acaban en las próximas horas). Pese a que soy un poco negado en el mundo de javascript y su framework Jquery, la evolución de las tecnologías me hace ver que tengo que esforzarme en entenderlo si quiero seguir aprendiendo cosas. Esta noche os voy a explicar como me las he apañado para llamar a funciones php desde jquery y tratar con los datos devueltos.
Antes que nada, no es técnicamente llamar a una función y punto, en realidad llamo a un archivo .php y desde ello ya me encargo. Comienzo pues:

Lo primero de todo, cargamos Jquery en la página con:
< script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" >< / script >
Después ya mejor copiamos este fragmento de código y si no lo entendeis no pasa nada (yo a duras penas lo entiendo), simplemente os lo creéis:

function llamadaAjax(){
    $.ajax({
        type: "POST",
        url: "class/usuarioAjax.php",
        data: {tarea: 'comprobarUsuario', nomUsuario : $('#txtRegistroNombreUsuario').val()},
        success: function( respuesta ){
            if (respuesta == 'Usuario ya existe')
                alert("Usuario existe");
            else
                alert("Usuario no existe");
     }});
}

<input type="submit" value="Comprobar usuario" onclick="javascript:llamadaAjax()" />

Cuando en Jquery hablamos de "$.ajax" ya nos ahorramos todo el lio de javascript de llamar a los objetos ajax en función del explorador y otras cosas, luego especificamos si el tipo es POST (las variables no se ven en la barra de direcciones) o GET (se ven), aunque como en este caso es una llamada asíncrona, a la barra del navegador no le repercute, pero yo soy más de usar POST a menos que me interese posicionar. El campo url simplemente es para indicar donde está el archivo php a ejecutar, y data es para pasarle las variables que recibirá ese archivo por POST o GET. Si la ejecución fue bien se lanzará el success, sino tendriamos que añadir el apartado "error" o bien arreglarlo hasta que se lance el success. Una vez lanzado el success, ya tenemos en el parámetro de su función el valor devuelto de la llamada al archivo. Obviamente la parte código no acaba aquí, falta el archivo .php:
< ? php
include 'usuario.php';
$usuario = new usuario();
switch($_POST["tarea"]){
case 'comprobarUsuario':
echo $usuario -> comprobarUsuarioExistente ($_POST["nomUsuario"]);
break;
case 'crearUsuario':
echo $usuario -> crearUsuario($_POST["nomUsuario"], $_POST["correo"], $_POST["password"]);
break;
}
? >
Os explico, como estoy haciéndome en una web todos los métodos en clases, no quería que por el ajax mezclase cosas, así que me he creado este archivo intermedio que se dedica a llamar ya a la clase que toca. Fijaros en que utilizo la variable "tarea" que envío desde el código jquery para diferenciar que fragmento de código debe ejecutarse, y la última línea que se leerá antes de volver contiene un "echo", el valor de dicho echo es lo que recuperas en jquery y va como parámetro a success.

Espero que a más de uno le solvente esas dudas místicas de como llamar a funciones de servidor mientras está ejecutándose el código en cliente, si tenéis alguna duda comentad