Ejemplo AJAX envío formulario con jQuery

Publicada el 22 abril, 20132 enero, 2020 por Trescomatres

Twitter

Facebook

A continuación encontraréis un ejemplo AJAX envío formulario con jQuery. Todo el código necesario para hacerlo.

Por un lado, tenemos un fichero pw-pac1.html, donde tenemos el formulario y el código encargado de enviar el formulario.

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

Fijaos que el primer paso será llamar a la librería jquey para poder realizar todas las acciones. La función validarUsuario() será la encargada de enviar el formulario. Veamos:

Header del fichero

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function validarUsuario(){
  // Cogemos valor del nombre en el formulario
  pnom= $('#nom').val();
  // Cogemos la contraseña en el formulario
  ppass= $('#pass').val();
 
  $.ajax({
    type:  'POST',     // Indicamos que el formulario se enviará POST
    url:   './pw-pac1.php',   // Lo enviaremos al fichero pw-pac1.php
    data:  { nom: pnom, pass: ppass }   // Indicamos qué datos enviamos
  // En el caso que el envío sea correcto
  }).done(function( msg ) {
    $("#consola").html(msg);
  // En el caso que el envío sea incorrecto
  }).fail(function (jqXHR, textStatus, errorThrown){
    $("#consola").html("The following error occured: "+ textStatus +" "+ errorThrown);
  });
}
</script>

Cuerpo fichero

En el cuerpo del fichero, tendremos el formulario. Fijaos que tanto el formulario como los campos, les he asignado un Id para nombrarlos y poder trabajar con ellos posteriormente (coger los datos).

<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']=="trescomatres" && $_POST['pass']=="pwpac1" ){
    echo "Usuario validado correctamente";
} else {
    echo "Usuario no existente";
}

Ya en el primer fichero hemos indicado que será este fichero (pw-pac1.php) el que recibe los datos y escribe el resultado. Con las variables $_POST recogemos los datos.

Conclusiones envío formulario AJAX

En este ejemplo, solo se trata el envío de la información. No se tiene en cuenta para nada la seguridad. Todo envío de formulario, debe revisarse, controlarse y vigilar que no se inyecta información. Por favor, sólo es un código de muestra y os dejo bajo vuestra responsabilidad el tema seguridad.

Espero que os haya sido de interés y utilidad el ejemplo AJAX envío formulario con jQuery.

Más información