Ejemplo AJAX envío formulario con jQuery

Pequeño ejemplo de utilización de AJAX para el envío de un formulario

Página del formulario (pw-pac1.html)

En el header

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function validarUsuario(){
  pnom= $('#nom').val();
  ppass= $('#pass').val();
 
  $.ajax({
    type:  'POST',
    url:   './pw-pac1.php',
    data:  { nom: pnom, pass: ppass }
  }).done(function( msg ) {
    $("#consola").html(msg);
  }).fail(function (jqXHR, textStatus, errorThrown){
    $("#consola").html("The following error occured: "+ textStatus +" "+ errorThrown);
  });
}
</script>

En el cuerpo

<h1>Valida usuari</h1>
<form id="validador"><label for="nom">Nombre</label>
<input id="nom" type="text" name="nom" value="Insereixi nom" />
<label for="pass">Password</label>
<input id="pass" type="password" name="pass" />
<input onclick="validarUsuario()" type="button" value="Valida usuario" />
<div id="consola">Bienvenida</div>
</form>

Recordad llamar a la librería jQuery

El botón del formulario, al ser clicado, llama a la función validarUsuario(). Ésta, coge los valores del formulario y los envía utilizando AJAX. Luego trata los estados done, en el caso de que la petición hubiera sido resulta satisfactoriamente, o fail en caso contrario.

El resultado lo escribe en la caja “Consola.”

Página destino formulario (pw-pac1.php)

if ( $_POST['nom']=="rocatic" && $_POST['pass']=="pwpac1" ){
    echo "Usuario validado correctamente";
} else {
    echo "Usuario no existente";
}

Fichero que recibe los datos y escribe el resultado.

Artículos relacionados

jQuery UI – Tutorial 2 – Puesta en mar... Tutorial que muestra cómo poner en marcha la librería jQuery UI. Qué debo descargar, los termas predeterminados de jQuery UI, colocar la librería en n...
Apuntes librería JavaScript 3D Three.js Este fin de semana, y aprovechando las fiestas Navideñas, me he puesto a curiosear la librería Three.js Como normalmente tengo la cabeza casi llena de...
Fundamentos de NodeJS Os dejo un vídeo para los que quieran iniciarse con NodeJS. Me remito a la descripción en WikiPedia que creo que es la mas clara: Node.js es un ent...
Socialite.js – Botones sociales en su web Una pequeña librería JavaScript que permite poner los botones sociales de Facebook, Twitter, Google y LinkedIn de forma fácil en cualquier web o blog....

Un comentario

Deja un comentario

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

*