Comencemos con el código html que nos quedaría como el siguiente
Tutorial
Tutorial jquery, ajax y php
El formulario nos quedaría como el que se muestra a continuación:
Tutorial jquery, ajax y php
$(document).ready(function() {
$("#formulario").submit(function(event){
event.preventDefault();
var request;
request=$.ajax({
type: "POST",
url: "enviar.php",
data: $(this).serialize()
});
//deshabilita los inputs cuando hacemos el request
var $inputs = $(this).find("input, select, button, textarea");
$inputs.prop("disabled", true);
//el request fue hecho con éxito
request.done(function (response, textStatus, jqXHR){
//mostramos la respuesta del request
alert(response);
});
// callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
//ocurrio un error
alert(
"Ha ocurrido el siguiente error "+
textStatus, errorThrown);
});
//función que siempre se ejecutará
request.always(function () {
// reenable the inputs
$inputs.prop("disabled", false);
//limpia el formulario
document.getElementById("formulario2").reset();
});
});
});
Finalmente nuestro código php0)
{
//obtenemos el nombre
$nombre=$_POST['nombre'];
//obtenemos la edad
$edad=$_POST['edad'];
echo 'Bienvenido '.$nombre.' tu edad es: '.$edad;
}
El resultado es el que se muestra a continuación
No hay comentarios:
Publicar un comentario