» Utilizando Ajax com jQuery
27/10/2015    Javascript
Olá!
Nesse artigo vou mostrar de forma bem simples como realizar uma requisição em Ajax utilizando jQuery.
Mas, o que é Ajax? Esqueça o super-herói marciano da Liga da Justiça e também o produto de limpeza.
Ajax é um termo que em inglês significa 'Asynchronous Javascript and XML', em português fica Javascript Assíncrono e XML. Resumindo, com Ajax nós podemos fazer requisição de dados e páginas sem ter que recarregar toda a página.

Exemplo: Você tem uma página imensa de um artigo, no final há um pequeno formulário para enviar um comentário. Tradicionalmente teríamos que reenviar toda a página para que as informações no formulário de comentários fosse enviado, com Ajax nós enviamos as informações pra qualquer página, essa página realiza a inserção no banco de dados, exibe uma mensagem de sucesso e nós trazemos essa mensagem de sucesso e jogamos no formulário, tudo sem recarregar a página. Então vamos colocar a mão na massa:

Primeiro vamos inserir o jQuery no projeto:

        
    

Agora vamos criar um form simples:

            
Preencha o form abaixo para enviar uma mensagem.

No CSS vamos criar uma classe para indicar erro no preenchimento do formulário:

            .txb_erro { border: 1px solid #F73E6C; }
        

Agora vamos trabalhar o Javascript... Primeiro vamos criar uma função, essa função terá que realizar o seguinte procedimento:
1- Pegar os valores dos campos; 2- Validar os valores (no nosso caso, se estão em branco ou não); 3- Realizar a requisição Ajax; 4- Trazer o resultado da requisição e mostrar para o usuário.

Segue abaixo o código do passo 1 até o 3:

            function envia() {
                // Variaveis
                var str_nome, str_email;
                var validacao = true;
                
                // Pegamos os valores dos campos
                str_nome = $("#nome").val();
                str_email = $("#email").val();

                // Validamos os valores
                if (str_nome == "") { $("#nome").addClass("txb_erro"); validacao = false; }
                if (str_email == "") { $("#email").addClass("txb_erro"); validacao = false; }

                // Verificamos a validacao
                if (validacao == false) { return false; }
                
                // AJAX AQUI
            }
        
No código a cima nós criamos as variáveis que serão utilizadas na validação, pegamos os valores do form e o validamos, caso seu formulário seja muito grande você pode usar plugins próprios para validação como o jQuery Validate, mas como o intuito do artigo é explanar o uso do Ajax então validamos de forma simples.

Agora vamos para a parte do Ajax. Onde no código a cima está escrito "AJAX AQUI" substitua pelo código abaixo:

            // Realizamos o Ajax
            $.ajax({
                url: "destino.aspx",
                type: "POST",
                data: { nome: str_nome, email: str_email },
                success: function (retorno) {
                $('#itens_form').html(retorno);
                }
            });
        
No código a cima, primeiro iniciamos o Ajax, dentro dele passamos alguns parâmetros, são eles:
- url, indica a url que será acessada.
- type, indica o tipo de padrão usado para passar os parâmetros para a url, POST ou GET
- data, contém as informações do nosso formulário (str_nome e str_email) e os nomes dados a essas informações (nome e email), que serão utilizados na página de destino para receber as informações.
- success, contém a função que será executava quando o procedimento estiver completo, a variável 'retorno' dentro da função conterá o conteúdo html que a página de destino retornou, então nós pegamos esse conteúdo e jogamos dentro da div do form.

Para finalizar, nós linkamos o click do botão à função através do jQuery:

            $(document).ready(function(){
                $("#btn_enviar").click(function(){
                    envia();
                    return false;
                });
            });
        


Para ver todo o código acesse o link abaixo, porém o Ajax não irá funcionar pois o site em questão não aceita comandos Ajax: Ajax no jQuery - jsfiddle.net

Espero que tenham gostado!
Até a próxima!




Comentários