Pequeño ejemplo AJAX con jQuery

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 que hace consulta AJAX

<!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>

[wp_ad_camp_2]

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.

Artículos relacionados

bideo.js – poner video en el fondo de página... Librería que permit de forma sencilla, poner un video como fondo en una página web. Es muy utilizado en páginas de inicio para intentar impactar al vi...
Habilitar WebGL en navegador Chrome Si estáis viendo esta entrada de blog es porque seguramente estaréis experimentando con librerías 3D para vuestro navegador. Yo seguí los siguientes p...
Instalar Apache, Mysql, PHP y phpMyAdmin con YUM (... Al igual que con sistema operativos como Ubuntu, se utiliza apt-get para instalar paquetes, YUM nos permite administrar las instalaciones en SO como C...
GroundWork CSS – 01 – Framework HTML5 ... El primero de los cuatro vídeos que he preparado para mostrar cómo utilizar el framework GroundWork para la creación de páginas web responsive. En est...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*