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

GroundWork CSS – 04 – Framework HTML5 ... Último de los cuatro vídeos del tutorial para la creación de páginas web responsive con el framework GroundWork CSS. En este caso vemos como crear el ...
Comprobar enlaces rotos El tener una página web con todos los enlaces correctos es mas importante de lo que se cree. De ello depende en gran medida que buscadores como Google...
Facilitar la puesta en marcha servidor LAMPP Vídeo-tutorial que explica de forma concisa y fácil el cómo crear dos scripts en el escritorio para poner en marcha y parar nuestro servidor LAMPP. ...
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...

Deja un comentario

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

*