form_submit.js: submissão de formulário para servidor

Neste artigo, apresentaremos um script que tem por objetivo submeter os dados de um formulário HTML para o servidor. Este script foi desenvolvido para funcionar com qualquer formulário incluído em uma aplicação Web arbitrária.

Para o script funcionar, o formulário precisa seguir a seguinte estrutura:

  • Tags que envolvem o formulário:
 <form class="form" role="form" action="" method="post">
    • Tags para cada campo do formulário
<p>
<label for="login">Login</label>
<input class="form-control" name="login" type="text" autofocus="" placeholder="Login" />
</p>

Caso você esteja usando o framework Spring, pode fazer uso das tags de formulário dele, que irão facilitar a recuperação dos dados enviados pelo servidor:

  • Tags que envolvem o formulário:
<form:form class="form" role="form" method="post">
  • Tags para cada campo do formulário
 <tr>
 <td><form:label path="...">...</form:label></td>
 <td><form:input path="..." type="..."/></td>
 </tr>
Com os seus formulários projetados dessa forma, você precisa agora adicionar ao seu projeto uma arquivo form_submit.js onde residirá o código que processará a submissão dos dados do formulário.
Para que isso seja feito, vamos usar a função .on() do jQuery ao elemento document para definir uma função para o evento submit de nossos formulários. Para que isso seja possível, devemos associar aos formulários um atributo class com valor, digamos, form.
$(document).on('submit', '.form', function (event) {
Dentro da função, a primeira coisa que devemos fazer é desativar ação padrão do evento de submissão de formulário. Isso é feito com o comando event.preventDefault().
Em seguida, precisamos ler o atributo action do formulário, que é para onde os dados devem ser enviados no servidor. Em seguida, usa-se a função $.post() do jQuery para enviar os dados para o servidor.
Aqui, chegamos em uma parte importante do processo. Após processar os dados recebidos, o servidor irá retornar uma resposta para o cliente. Se você estiver usando o Spring, isso é feito declarando seu método no controller com a tag ResponseBody, e definindo-a com o tipo de retorno String (ou algum tipo primitivo).
Você precisa ter a lista de retornos possíveis do servidor, de forma a poder exibir para o usuário uma resposta apropriada. Isso é feito adicionando à página Web (logo após o formulário), algumas tags div cujo id deve ser igual a resposta do servidor. No exemplo a seguir, a resposta do servidor pode ser yes ou not:
<div id="yes" class="alert alert-success" style="display: none;">
 <strong>Pronto!</strong> Solicita&ccedil;&atilde;o efetuada com sucesso.
 <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
</div>
<div id="not" class="alert alert-danger" style="display: none;">
 <strong>Erro!</strong> N&atilde;o foi possivel efetivar a sua solicita&ccedil;&atilde;o.
 <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
</div>
O código completo para o script fom_submit.js ficaria assim:
$(document).on('submit', '.form', function (event) {
 event.preventDefault();
 var $form = $( this ),
 url = $form.attr( "action" );
 var posting = $.post( url, $(this).serialize() );
 posting.done(function( data ) {
 $("#"+data).css("display", "block");
 $("#"+data).fadeOut(3000);
 $(".form").each (function(){
 this.reset();
 });
 });
});