Una razón para seguir utilizando jQuery es por su sencillez al realizar peticiones Ajax usando los métodos $.ajax $.post y $.get
$.ajax $.post y $.get nos permite realizar peticiones asíncronas, por lo que pueden ser ejecutadas mientras que el navegador es libre de realizar otras operaciones al mismo tiempo.
Estas peticiones usan la librería XMLHttpRequest y nos permite realizar peticiones tanto peticiones GET como POST.
XMLHttpRequest fué incluida en Internet Explorer 5.0 por Microsoft como un objeto ActiveX y posteriormente fué incluido por navegadores Mozilla, Opera y Safari.
- $.ajax es una función o método de jQuery que nos permite realizar peticiones asíncronas al servidor.
- $.post y $.get son una forma sencilla que tiene jQuery para simplificar aún más la función $.ajax.
$.ajax
$.ajax nos permite realizar esas peticiones asíncronas tan necesarias en nuestras páginas web.
Estas peticiones podrán ser tanto POST como GET. Un ejemplo sencillo de uso sería el siguiente:
|
1 2 3 4 5 6 7 8 9 |
$.ajax({ type: "POST", url: 'login.php', data: data, dataType: json, success: function(data) { alert(data); } }); |
Tiene gran número de configuraciones, donde las más comunes son:
- type: Será el método que queremos utilizar (Post o Get).
- url: la ruta del fichero que recibirá la petición.
- data: cotiene una cadena de texto con los datos devueltos por el fichero.
- dataType: Formato de los datos devueltos por el servidor (xml, json, script, text, html), que por defecto serán texto.
- success: función que se ejecutará en caso de tener éxito la solicitud.
- error: función que se ejecuta si la petición falla.
- complete: es una función que se ejecutará una vez llamadas success o error.
- cache: Valor booleano (true/false). Por defecto es true y nos permite forzar si las páginas serán cacheadas por el navegador.
- beforeSend: es una función que nos permitirá modificar el objeto antes de ser enviado.
- async: Valor booleano (true/false) por defecto a true por lo que se realizar una operación asíncrona.
- contentType: como son enviados los datos al servidor. Por defecto serán UTF-8
- crossDomain: Valor booleano (true/false) que por defecto es false. Si queremos forzar que las peticiones sean sobre el mismo dominio lo estableceremos a true.
- timeout: nos permite indicar el tiempo en milisegundos en el que acabará la petición.
- username y password: usuario y clave para realizar peticiones de acceso HTTP usando XMLHttpRequest.
$.post
$.post es la versión simplificada de $.ajax y tal y como su nombre indica, realiza una petición POST.
Los datos retornados por sucesss son almacenados en el objeto data.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$.post("login.php", { email: $("#email").val(), password: $('#password').val() }, function(data) { console.log("datos recibidos: "+JSON.stringify(data)); console.log("email: "+data.email); if (data.auth=='yes') { $('#message-area').html('Login Succesful !!!'); } else { $('#message-area').html('error !!!'); } }, "json"); |
La configuración de $.post es bastante sencilla:
- url: la ruta del fichero que recibirá la petición.
- data: cotiene una cadena de texto con los datos devueltos por el fichero.
- success: función que se ejecutará en caso de tener éxito la solicitud.
- dataType: Tipos de datos devuelto por el servidor (xml, json, script, text, html) y por defecto será texto
Login con Bootstrap, jQuery y PHP
Para crear el formulario de acceso necesitaremos las librerías:
- Bootstrap 4 >
- jquery 3 >
- fontawesome 5 >
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<!doctype <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>JQuery Login</title> <!-- jQuery 3.3.1 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Bootstrap 4.3.1 --> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <!-- font awesome library --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <!-- jQuery Login --> <script src="assets/js/jquery-login.js"></script> <!-- main css --> <link rel="stylesheet" type="text/css" media="screen" href="assets/css/dist/style.min.css" /> </head> <body> <!-- login area --> <aside id="login" class="col-sm-4"> <div class="card"> <div class="card-body"> <a href="" class="float-right btn btn-outline-primary">Registro</a> <h4 class="card-title mb-4 mt-1">Acceso</h4> <!-- margins --> <p> <!-- social login--> <a href="" class="btn btn-block btn-outline-info"> <i class="fab fa-twitter"></i> Acceso con Twitter</a> <a href="" class="btn btn-block btn-outline-info"> <i class="fab fa-facebook-f"></i> Acceso con Facebook</a> </p> <hr /> <!-- start form --> <form name="login_form" id="login_form" action=""> <div class="form-group"> <input name="" class="form-control" placeholder="Email or login" type="email" id="email" value="jose@artegrafico.net" /> </div> <div class="form-group"> <input class="form-control" placeholder="******" type="password" id="password"> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <button type="submit" class="btn btn-primary btn-block" id="access" name="access">Acceso</button> </div> </div> <div class="col-md-6 pt-2 pr-4 text-right"> <a class="small" href="#" class="">¿Olvidó su contraseña?</a> </div> </div> </form> <!-- end form --> <!-- messages area --> <div class="row"> <div class="col-12"> <div class="outer-loader" id="message-area"> <span class="inner-loader"></span> </div> <span class="debug"></span> </div> </div> <!-- end messages area--> </div> </div> </aside> <!-- end login area--> </body> </html> |
Ahora veamos el fichero jquery-login.js y cómo funcionaría una solicitud de acceso a un área privada:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
$(document).ready(function(fn) { // on submit form $("#login_form").submit(function( event ) { var debug = true; // Stop form from submitting normally event.preventDefault(); $("#access").attr("disabled", true); // Disable access button $("#message-area").removeClass() .addClass('messagebox') .html('<img src="assets/img/loader.gif" alt="validando ..." />') .fadeIn(2000); // Send data to login file $.post("login.php", { email: $("#email").val(), password: $('#password').val() }, function(data) { // Login Successful if (data.auth=='x100') { // fadeTo(duration, opacity, function) $("#message-area").fadeTo(200, 0.1, function() { $(this).html('Comprobando usuario ...') .addClass('text-info') .fadeTo(900, 1, function() { $('#message-area').removeClass('text-info'); $('#message-area').html('Login Succesful !!!') .addClass('text-success') .fadeTo(900,1); // if access ok, reload or redirect to page //document.location='index.php'; //document.location.reload(); }); }); // if any error found ... } else { // Enable access button again fot retry again $("#access").attr("disabled", false); // Show message error $("#message-area").fadeTo(200, 0.1, function() { $(this).html('Login Error !!!') .addClass('text-danger') .fadeTo(900, 1); }); } // Debug Console if (debug == true) { console.log("todo: "+JSON.stringify(data)); // cobnvert data json to string console.log("email: "+data.email); console.log("passw: "+data.password); console.log("auth: "+data.auth); } }, "json"); // return json data return false; }); }); |
- Se realiza una petición Post al fichero login.php.
- login.php recibe email y password de un formulario y chequeará contra la base de datos si estos datos son correctos.
- Si fueran correctos iniciamos sessiones, cookies, etc ..
- Retornamos los datos que deseemos a través del objeto data en formato json.
Estos datos devueltos podremos hacer debug de ellos a través de console.log() y si es correcto el acceso hacer una recarga de pagina o redireccionarlo a otra que deseemos.
El fichero de login ya queda a nuestra elección personalizarlo (aquí tan solo se está comprobando que los datos son recibidos y se devuelven en formato json para realizar debug sobre ellos):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php session_start(); // get and sanitize data $email = filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL); $password = filter_input(INPUT_POST, 'password', FILTER_SANITIZE_SPECIAL_CHARS); // check if user and password is correct // if login is correct ... add sessions variables // return data echo json_encode([ "email" => $email, "password" => $password, "auth" => "x100" // auth code is only for redirect or reload page with javascript ]); |
El caso es que podremos realizar cualquier proceso que deseemos pero en este caso tan solo necesitamos saber si login.php valida el acceso.
La alternativa para crear un formulario de login sin necesidad de usar jQuery que sobrecargue tu página es usando Ajax directamente. Para saber cómo implementar el formulario de login puedes seguir este enlace.
