Php y JQuery: Llamar a una página Php desde Jquery para la descarga de datos

Para empezar hay que tener claro que Jquery es una librería Javascript que podemos incluir en nuestro código y que nos será de gran utilidad para interactuar con los documentos html y con el usuario. Para incluir Jquery en vuestro código tenéis que descargar la librería desde la página oficial y agregarla mediante la ruta donde se encuentra dentro de la etiqueta <head></head> de cada una de las páginas html en la que queráis utilizar jQuery.

<head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

     <!-- Título -->
     <title>Mi Página html</title>
 
     <!--SCRIPT PARA AGREGAR LIBRERÍA JQUERY A ESTA PÁGINA-->
     <script src="mis_librerias/jquery-1.3.2.min.js"</script>
 </head>

Uno de los problemas más comunes en el mundo web es cuando desde código Javascript o jQuery necesitamos llamar a un php para descargar datos de una base de datos. Esto se hace mediante ajax, y gracias a Jquery (que nos simplifica el trabajo muchísimo) podemos realizar esta tarea de una manera muy simple.

JQuery nos proporciona la función ajax, con la que podremos realizar la llamada a la página php y recibir los datos consultados desde esta.

En la función le especificamos el tipo de método por el que le pasamos los parámetros al php, en este caso el método “POST”, también la url de nuestro php “ConsultaSql.php”, y finalmente dentro de “data” todos los parámetros que recibiremos en el php separados por comas y con el formato clave:valor, donde clave será el nombre del parámetro que recogeremos y valor, tal y como especifica el nombre, será el valor del parámetro.

    $.ajax({
        type: "POST",
        url: "ConsultaSql.php",
        data:{consulta: "1", id: 185}
    }).done(function(msg){
        if (msg.trim() === "1") {
            alert("Se ha realizado la consulta correctamente");
        }else{
           alert("Error en la consulta sql");
        }
    });

Esta función irá dentro de una etiqueta  , y ahora vamos a mostrar el código php, en el que veremos como recoger los valores que le mandamos desde Javascript, y como devolver una respuesta, para que podamos comprobar que nuestro código php se ha realizado con éxito.

<?php
//Recogemos las variables que recibimos por el método "POST"
$consulta = $_POST["consulta"];
$id = $_POST["id"];

switch ($consulta){

    case "1": //Si la variable consulta vale "1" realizamos un update
        realizarUpdate($id);
        break;

    case "2": //Si la variable consulta vale "2" realizamos un delete
        realizarDelete($id);
        break;
}

//Realiza un update en la base de datos, recibe el id del cliente por parámetro
function realizarUpdate($id){
    $consulta = ("UPDATE clientes SET firma = 1 WHERE id_cliente = ".$id);
 
    if (!$consulta){//Si la consulta no se ha podido realizar
        echo "0"; //Error
    }else {
        echo "1"; //Correcto
    }
}

//Elimina un cliente de la base de datos, recibe el id del cliente por parámetro
function realizarDelete($id){
    $consulta = mssql_query("DELETE clientes WHERE id_cliente = ".$id);
 
    if (!$consulta){//Si la consulta no se ha podido realizar
        echo "0"; //Error
    }else {
        echo "1"; //Correcto
    }
}

?>

Creo que todo esta bastante claro, al principio recibimos los parámetros que hemos enviado desde el ajax, después mediante un “switch” analizamos el valor de la variable “$consulta”, y según el que sea  realizamos una acción u otra. Finalmente dentro de la función realizamos una consulta a la base de datos (en este caso sql server), y devolvemos un valor mediante “echo”. El valor devuelto lo analizamos en la función ajax, donde comprobamos si es “1” o “0”, va entre comillas porque desde php el echo es entre comillas, por lo tanto un String y no un Integer, aunque podéis devolver cualquier tipo y valor.

Hay que tener en cuenta que en esta entrada se explica como utilizar la función ajax de Jquery y no el código php, por lo tanto la conexión a la base de datos para realizar las consultas no aparece.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s