A biblioteca JQuery já nos facilita bastante a fazer requisições AJAX. Porém, sempre que enviamos um formulário via AJAX, normalmente é necessário armazenar todos os campos em variáveis para então enviar ao servidor. O jQuery Form Plugin é um plugin que tem o objetivo de facilitar ainda mais esse processo. Basicamente, ao enviar um formulário, o plugin armazena as informações de cada elemento do formulário e envia ao servidor utilizando AJAX. Para exemplificar seu uso, vamos criar um formulário bem simples.

O formulário

Requisição AJAX Comum

Se clicarmos em enviar no formulário acima, os dados serão enviados para o arquivo enviar.php de forma convencional. Se quisermos enviar utilizando AJAX, ou seja, sem a necessidade de recarregar a página, normalmente fazemos assim:

Requisição AJAX com Plugin

Com o plugin simplesmente utilizamos o método ajaxForm(). O plugin irá “mapear” todos os campos do formulário e enviar automaticamente para a action definida no formulário, no nosso caso para o arquivo enviar.php.

Se a requisição for um sucesso, exibiremos a resposta no console de navegador. Simples, não?

O lado servidor

Apenas para verificar se deu tudo certo, vamos criar o nosso arquivo enviar.php, que vai nos retornar os dados que foram enviados em formato JSON.

Em ambos os casos, veremos o mesmo resultado no console do navegador, por exemplo:

Portanto, com ou sem plugin os dados foram recebidos pelo servidor para que possam sem manipulados (gravar no banco de dados, enviar por email, etc.). Porém a implementação com o plugin é muito mais simples e elegante.

Avançado

Vimos um exemplo bem simples, porém o plugin tem várias opções para requisições mais avançadas.

Chamando de um evento

Às vezes é necessário tratar alguma informação ou manipular algum objeto antes de enviar o formulário. Um exemplo é mostrar um indicador de carregamento:

Em resumo, quando o usuário clicar no botão de enviar, exibimos a mensagem de carregamento no botão e então enviamos o formulário utilizando o método ajaxSubmit() do plugin. Se enviado com sucesso ou ocorrer algum erro no servidor, escondemos a mensagem de carregamento do botão.

Tratar informações

É possível também manipular ou tratar as informações antes de enviar. Um exemplo seria uma validação do lado cliente:

Em resumo, antes do formulário ser enviado, passamos pelos campos do formulário que foram armazenados na variável data pelo plugin. Se for o campo do nome, verifica se o valor desse campo possui pelo menos cinco caracteres, caso não possua exibe um alerta e diz para o plugin não enviar o formulário.

Arquivos

Uma coisa muito interessante é que o plugin também envia os campos do tipo file. Ou seja, todo o trabalho para enviar um arquivo via AJAX é feito pelo plugin. Basicamente, funciona da mesma forma que os exemplos anteriores, por exemplo:

Outras opções

O plugin também possui várias outras opções que podem ser utilizadas na requisição, como por exemplo:

Conclusão

O jQuery Form Plugin facilita muito as requisições AJAX, principalmente quando trabalhamos com formulários que possuem vários campos de diferentes tipos. Nos exemplos, vimos basicamente envio de campos texto, porém é possível enviar qualquer outro tipo como checkbox, radio, file, hidden, etc. Enfim, é um plugin que normalmente utilizo em meus projetos e espero que lhe seja útil também.

Código fonte disponível em: https://github.com/rafaelcouto/Post1174

Referências

Compartilhe
Share on Facebook0Share on Google+0Tweet about this on TwitterPin on Pinterest0Email this to someone