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

6 comentarios:

  1. ME parece agradable. Yo particularmente tengo una funcion propia de ajax y lo manejo muy similar a como comentas, con un archivo intermedio que me hace las llamadas.... sin embargo, hay algo que ultimamente me ha causado mas ruido. y es cuando el resultado me trae MUCHA DATA. por ejemplo justo ahora estoy trabajand con unas vistas y las quiero actualizr con ajax. no se si seria bueno traerme toda la data en json y trabajar todo el armado con javascript o simplemente devolver un echo..... que opinas?

    ResponderEliminar
    Respuestas
    1. Buenas tardes Julio Rodríguez.
      Hace un tiempo intenté que me devolviese los valores por json en un array, pero no lo conseguí (estaba con jsp no con php, faltaban librerías y no podía implementarlas) así que me he hecho amigo de devolver el valor con un echo, en tu caso te recomiendo que utilices un símbolo como delimitador, como ";" o "¡" en los resultados que generas en la llamada ajax, y en el retorno del echo, cuando estás en success, utiliza el split de javascript (var nuevaVariable = variableResultadoDeEcho.split(";");)

      Si por otro lado puedes devolver los valores ya en json, por lo que he visto de otros colegas, es una respuesta más estructurada, más legible que el split.

      Eliminar
    2. Se puede hacer facilmente que php devuelva datos que luego puedan ser interpretados en javascript como un arreglo..

      simplemente hay que usar json_encode dentro de php.

      en javascript hay que indicarle a $ajax que recibira json, lo cual se hace mediante la linea:

      dataType: 'json'.

      Y en el success se pone por ejemplo
      json.nombre_campo para acceder al valor devuelto desde php.. :)

      Cualquier cosa me escriben si algo no quedo claro..

      Saludos

      Eliminar
  2. ...¿y el html? Hagamos las cosas completas. no, a medias o no hagamos nada. Mucho bla,bla innecesario para explicar una cosa que se puede abreviar, pero debes ser claro.

    ResponderEliminar
    Respuestas
    1. Buenas tardes Víctor Rozas.

      Este post lo hice desde mi inexperiencia a la hora de hacer llamadas ajax, y lo creé para que la gente que de 0 necesita hacerla tenga una guía, para gente que tiene experiencia entiendo que puede ser casi un chiste.

      Edito el código para poner el HTML necesario.

      Gracias por la crítica.

      Eliminar
    2. A mi me parecio excelente, y como dice francisco para gente sin experiencia (como yo) esta buenisimo.

      solo falto el html, pero bueno eso es extra, porque si ya estamos en este nivel, ya sabremos como crearlo.

      FELICIDADES POR ESTE ARTICULO Y GRACIAS!!!

      Eliminar