Algunas veces nuestras peticiones de formulario son pesadas (cargar archivos por ejemplo) y esto puede ocasionar que el usuario se estrese o siga presionando botones, para ello yo en estos casos recurro a realizar una petición ajax remplazando el submit del form (a la vez bloqueo la pantalla para que no estén haciendo peticiones a lo bestia, pueden utilizar algo como esto: [bloquear la pantalla con un div]).
Para ello podemos ayudarnos de la función serialize() de jquery, con la cual nos regresa la cadena de parámetros que están en nuestro form (valor1=1&valor2=2&valor3=3…).
Tenemos que tener cuidado en poner el return false al final, ya que con eso evitamos que se continúe con el submit común.
El siguiente ejemplo muestra fácilmente como podemos realizar esa petición (leer los comentarios):
Código HTML
<form id="miForm" action="/peticion.php">
<input name="cajaTexto" type="value" value="pato" />
<input type="submit" value="Enviar" />
</form>
Código Jquery
//selector sobre el form seguido de la función submit
$("#miForm").submit(function(){
//de esta manera remplazamos
//ahora obtendremos los atributos que necesitaremos
url=$(this).prop("action")
//la función serialize nos regresa los input, es importante ponerles name
parametros=$(this).serialize()
//aqui utilizamos la petición, en este caso post
$.post(url,parametros,function(data){
//aqui es cuando ya se hizo nuestra petición
//regularmente yo regreso 1 para mostrar exito
if(data=="1"){
alert("exito")
}else{
//si no regreso el 1, regreso el error y asi lo muestro
alert(data)
}
})
//ESTO ES MUY IMPORTANTE, YA QUE SI NO SE PONE SE REALIZA LAS DOS PETICIONES
//TANTO AJAX COMO LA PETICIÓN NORMAL DE FORMULARIO
//REFRESCANDO TODA LA PAGINA.
return false;
})
De esta manera podremos remplazar la petición submit normal, y hacer una petición ajax, que es mas formal y elegante.
Nota: el archivo peticion.php del action del form, es un proceso x en el cual se realiza una operación ya sea inserción, validación, etc. Y nos regresa en caso de éxito un «1», sino el error.
