Supongamos que tenemos un formulario en PHP y que el
procesamiento de los datos del mismo puede ser lento, en este caso es importe
que los usuarios sepan que se está realizando el proceso y que deben esperar
por esto. Para ello vamos a ver como mostrar un cuadro de espera.
Lo que vamos a hacer es crear dos archivos PHP que
en este caso voy a llamar formulario.php, donde se encontrará el formulario, y procesar_formulario.php que será el archivo que será llamado a través de AJAX, mientras este se procese aparecerá un cudro de en espera.
El primero de ellos tendrá el formulario y su contenido es
el siguiente:
<html>
<head>
<!-- Estilo para el cuadro de espera -->
<style>
.waiting {
width:210px;
height:35px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
border-radius: 10px;
border: 1px solid #cccccc;
background-color: white;
padding: 5px;
display:none;
}
</style>
<!-- Librerías de jquery -->
<script type="text/javascript" language="javascript"
src="jquery-1.11.0.min.js"></script>
<script> // Función para recolocar el cuadro de espera en función del
// tamaño del navegador
$(window).resize(function() {
$('.waiting').css({
position: 'absolute',
left: ($(window).width() - $('.waiting').outerWidth()) / 2,
top: ($(window).height() - $('.waiting').outerHeight()) / 2
});
});
// Ejecutar el resize una primera vez
$(window).resize();
// Función que va a enviar el formulario
function enviarFormulario() {
try
{
// Parámetros que se van a pasar
var datos = {
"nombre": document.getElementById("nombre").value,
"apellidos": document.getElementById("apellidos").value
};
// Función de jquery que ejecuta la petición ajax
$.ajax({
data: datos,
url: 'procesar_formulario.php',
type: 'post',
beforeSend: function() {
// Mostrar la pantalla de procesando antes de realizar la llamada
document.getElementById("waiting").style = "display:block";
},
success: function(respuesta) {
// Si se realiza con éxito la llamada entonces
// se muestra el resultado de la misma y
// se oculta el cuadro de espera
$("#respuesta_ajax").html(respuesta);
document.getElementById("waiting").style = "display:none";
}
});
}
catch (err)
{
alert(err);
}
}
</script>
</head>
<body>
<!-- Cuadro de espera -->
<div id="waiting" class="waiting" >
<div style="float:left">
<!-- Imagen animada. Podeis generar las vuestras en
http://www.ajaxload.info/-->
<img src="ajax-loader.gif" align="middle"/>
</div>
<div style="float:left; padding-top:5px;padding-left: 15px;
font-weight: bold;">Procesando petición ....</div>
</div>
<!-- Div para mostrar el resultado de la petición ajax -->
<div id="respuesta_ajax"></div>
<!-- Formulario -->
<form>
<div style="display:table-row">
<div style="display: table-cell">Nombre:</div>
<div style="display: table-cell"><input type="text" id="nombre"/></div>
</div>
<div style="display:table-row">
<div style="display: table-cell">Apellidos:</div>
<div style="display: table-cell"><input type="text" id="apellidos"/>
</div>
</div>
<div>
<input type="button" value="Enviar Datos" onclick="enviarFormulario();">
</div>
</form>
</body>
</html>
El segundo es el que procesará los datos del formulario:
<?php
// Esperar 20 segundos (para que se muestre bien el cuadro de en espera)
sleep(20);
// Leer los datos del formulario y mostrarlos
echo htmlspecialchars($_POST['nombre']).' '
.htmlspecialchars($_POST['apellidos']);
?>
Con esto ya tenemos un formulario con un mensaje de espera en su procesamiento.
