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.

Información relacionada

Un comentario

Deja un comentario

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

*