Pequeño ejemplo para usar AJAX con jQuery

Publicada el por

Veamos uno de esos pequeños ejemplos sincillos y rápidos para ver cómo usar AJAX con jQuery para validar los datos de un usuario insertados desde un formulario.

Veamos un pequeño ejemplo dónde mostraremos cómo hacer una llamada asíncrona desde una página .html a un archivo .php. Resumiendo, tenemos un fichero .html con un formulario de acceso, que envía los datos con AJAX a un fichero .php que devuelve si los datos de acceso son correctas o no.

Como sabéis, la ventaja de hacerlo con AJAX es que no abandonas la web (es una de las ventajas de esta tecnología, que también tiene desventajas).

Importante: Es solo un ejemplo. No lo utilicéis para crear formularios de acceso. No se trata ningún tipo de protección contra ataques. Sólo es un ejemplo de utilización de AJAX con jQuery.

Fichero consulta.php

Fichero al que se envía el formulario. Éste recibe los dos campos (nom y pass) y verifica que sean correcto. Con la función ‘echo’ devolvemos el mensaje.

<?php
// Nos llegan los datos por POST 
if ( $_POST['nom']=="rocatic" && $_POST['pass']=="RocaPass298" )
{
  // Devolvemos que todo es correcto escribiendo por salida 
  echo "Usuario correcto"; 
} else { 
  // Mensaje si no cumple la validación de usuario y password 
  echo "Usuario no existente"; 
}
?>

Fichero html con formulario para usar AJAX

Y aquí tenemos el formulario. Fijaos en el código del $.ajax para ver cómo se hace la llamada. En la parte inferior del artículo veréis un enlace con más información.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo AJAX con jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
// Llamada librería jQuery
 <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
 <script type="text/javascript">
  function validarUsuario(){
    pnom= $('#nom').val(); // Cogemos del formulario el valor nom
    ppass= $('#pass').val(); // Cogemos del formulario el valor pass
    // Función que envía y recibe respuesta con AJAX
    $.ajax({
     type: 'POST',  // Envío con método POST
     url: './consulta.php',  // Fichero destino (el PHP que trata los datos)
     data: { nom: pnom, pass: ppass } // Datos que se envían
     }).done(function( msg ) {  // Función que se ejecuta si todo ha ido bien
      $("#consola").html(msg);  // Escribimos en el div consola el mensaje devuelto
     }).fail(function (jqXHR, textStatus, errorThrown){ // Función que se ejecuta si algo ha ido mal
     // Mostramos en consola el mensaje con el error que se ha producido
     $("#consola").html("The following error occured: "+ textStatus +" "+ errorThrown); 
    });
  }
</script>
</head>
<body>
 <strong>Validar usuario</strong>
  <form id="validador"><label for="nom">Nombre</label>
   <input id="nom" type="text" name="nom" value="Inserte su nombre" />
   <label for="pass">Password</label>
   <input id="pass" type="password" name="pass" /> 
   <!-- Botón que hace la llamada a la función validarUsuario() para enviar formulario -->
   <input onclick="validarUsuario()" type="button" value="Validar usuario" /> 
   <!-- Consola dónde mostramos mensajes devueltos -->
   <div id="consola">Bienvenido</div>
  </form>
</body>
</html>

Pues eso, un formulario que envía datos a un .php que los trata y devuelve un mensaje que se muestra debajo del formulario. Perfecto ejemplo para iniciarse con AJAX.

Espero que os sea de utilidad este pequeño ejemplo para ver cómo usar AJAX con jQuery para validar los datos de un usuario insertados desde un formulario.

Más información