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

<form id="formulario" method="post" action="enviar.php" role="form">

    <legend>Formulário</legend>

    <div class="form-group">
        <label>Nome</label>
        <input class="form-control" type="text" name="nome" required autofocus/>
    </div>

    <div class="form-group">
        <label>Email</label>
        <input class="form-control" type="email" name="email" required/>
    </div>

    <div class="form-group">
        <label>Mensagem</label>
        <textarea class="form-control" name="mensagem" rows="5" required></textarea>
    </div>

    <input id="enviar" class="btn btn-primary" type="submit" value="Enviar" data-loading-text="Enviando..."/>

</form>

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:

// Quando enviado o formulário
$('#formulario').on('submit', function () {

    // Armazenando informações do formulário em variáveis
    var nome = $("input[name=nome]").val();
    var email = $("input[name=email]").val();
    var mensagem = $("textarea[name=mensagem]").val();

    // Fazendo requisição AJAX
    $.post(this.action, {nome: nome, email: email, mensagem: mensagem}, function (resposta) {
        console.log(resposta);
    });

    // Retorna FALSE para que o formulário não seja enviado de forma convencional
    return false;

});

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.

// Quando enviado o formulário
$('#formulario').ajaxForm(function (resposta) {
    console.log(resposta);
});

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.

<?php

// Apenas retornando o que foi recebido
echo json_encode($_POST);

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

{"nome":"Rafael Couto","email":"rafaelcouto@outlook.com","mensagem":"Hello world!"}

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:

// Quando enviado o formulário
$('#formulario').on('submit', function () {

    // Armazenando objeto do botão para utilizá-lo posteriormente
    var botao = $('#enviar');

    // Exibindo indicador de carregamento (Bootstrap)
    // Docs: http://getbootstrap.com/javascript/#buttons
    botao.button('loading');

    // Enviando formulário
    $(this).ajaxSubmit({

        // Se enviado com sucesso
        success: function (resposta) {
            // Exibindo resposta do servidor
            console.log(resposta);

            // Escondendo indicador de carregamento
            botao.button('reset');
        },

        // Se acontecer algum erro
        error: function () {
            // Escondendo indicador de carregamento
            botao.button('reset');
        }

    });

    // Retorna FALSE para que o formulário não seja enviado de forma convencional
    return false;

});

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:

// Quando enviado o formulário
$('#formulario').ajaxForm({

    // Antes de enviar o formulário
    beforeSubmit: function (data, form, options) {

        // Passando pelos campos do formulário
        for (var i = 0; i < data.length; i++) {

            // Se for o campo nome
            if (data[i].name == 'nome') {

                // Verificamos se possui pelo menos 5 caracteres
                if (data[i].value.length < 5) {

                    // Exibindo mensagem
                    alert('O nome deve ter pelo menos 5 caracteres');

                    // Retornando false para que o plugin não envie o formulário
                    return false;
                }
            }
        }
    }

});

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:

<form id="formulario" method="post" action="upload.php" role="form">

    <legend>Formulário</legend>

    <div class="form-group">
        <label>Arquivo</label>
        <input class="form-control" type="file" name="arquivo" />
    </div>

    <input id="enviar" class="btn btn-primary" type="submit" value="Enviar" />

</form>

// Quando enviado o formulário
$('#formulario').ajaxForm(function (resposta) {
    console.log(resposta);
});

<?php

// Apenas retornando o que foi recebido
echo json_encode($_FILES);

Outras opções

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

// Quando enviado o formulário
$('#formulario').ajaxForm({

    // Tipo do retorno (XML, JSON ou SCRIPT)
    dataType: 'JSON',

    // Tipo de envio (POST ou GET)
    type: 'POST',

    // Tempo máximo de espera do retorno (milisegundos)
    timeout: 10000,

    // Método que será chamando quando a requisição for realizada com sucesso
    success: function(resposta)
    {
        console.log(resposta);
    },

    // Método que será chamado quando houver algum erro na requisição
    // Seja algum erro no servidor ou então estourar o TIMEOUT
    error: function()
    {
        console.log('Oops, ocorreu um errro.');
    }

});

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/facilitando-requisicoes-ajax-com-jquery-form-plugin

Referências

Alsup, Mike. jQuery Form Plugin. Disponível em <http://malsup.com/jquery/form>. Acesso em 19 de abril de 2015.

Facilitando requisições AJAX com jQuery Form Plugin