Utilizando AJAX com JQUERY

Salve galera! Hoje vai rolar um post sobre dois assuntos que são indispensáveis no desenvolvimento web atual. São eles o AJAX (Asynchronous Javascript and XML) e o plugin JQUERY (Write Less, Do More).

Na verdade “meio” que englobaremos ambos os assuntos em um só. Veremos como utilizar as famosas requisições assíncronas conhecidas como AJAX utilizando o plugin javascript mais famoso do mundo!

Antes de começarmos com os códigos, vale lembrar que AJAX são técnicas aplicadas à sites/sistemas web para tornar a aplicação mais amigável ao usuário. Através dele é possível trocar informações entre o browser (cliente) e o servidor de forma invisível, instantânea e sem carregamento de páginas.

A utilização de AJAX pode ser feita através do javascript puro, através de plugins/frameworks js ou através de classes/bibliotecas de linguagens server-sides como o XAJAX (escrito em PHP). Na minha opinião a forma mais fácil é através do JQUERY.

E é exemplificando ele que vou mostrar para vocês como fazer uma inserção em uma tabela do banco de dados utilizando AJAX.

Crie um banco de dados com a tabela usuario(idusuario e nome). Organize seus arquivos da seguinte maneira.

  • index.php (Arquivo principal onde vai o formulário)
  • ajax.js (arquivo javascript onde vai a requisição)
  • inserir.php (arquivo que insere as informações no banco de dados)

Vamos iniciar pela implementação do arquivo index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>AJAX com JQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js" ></script>
    <script type="text/javascript" src="ajax.js" ></script>
</head>
<body>
<h1>AJAX com Jquery</h1>
<form name="form1" id="form1">
    Código: <br />
    <input type="text" name="idusuario" id="idusuario" />
    <br /><br />
    Nome: <br />
    <input type="text" name="nome" id="nome" />
    <br />
    <input type="button" id="enviar" value="Enviar Dados" />
</form>
 
<div id="resultado"></div>
 
</body>
</html>

Nessa página colocamos o formulário com os campos Código e Nome. Vale observar que no cabeçalho do documento eu importo o jquery (do site oficial) e o ajax.js. Logo abaixo do form coloco uma div de id “resultado” que será onde a resposta de nossa requisição será exibida.

Feito isso, vamos à implementação do arquivo ajax.js

1
2
3
4
5
6
7
8
9
10
11
12
13

//arquivo ajax.js
$(document).ready(function(){
    $('#enviar').click(function(){
        $.ajax({
            url : 'inserir.php',
            type : 'POST',
            data : 'idusuario=' + $('#idusuario').val() + '&nome=' + $('#nome').val(),
            success: function(data){
                $('#resultado').html(data);
            }
        });
    });
})

Nesse arquivo defino que a ação deverá ser executada quando o botão #enviar for clicado. Na função utilizamos a variável $.ajax passando como parâmetro 4 informações bem importantes.

  • url (documento que será requisitado)
  • type (tipo da requisição: GET, POST, PUT ou DELETE)
  • data (os dados que serão enviados )
  • success (ação que deve executar em caso de sucesso na requisição)

Por fim, nos falta implementar o arquivo inserir.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<?php
//arquivo inserir.php
 
/* CONECTA COM O BANCO DE DADOS */
mysql_connect('localhost', 'usuario', 'senha') or die('Erro ao conectar com o servidor');
mysql_select_db('nome_do_banco') or die ('Erro ao selecionar o banco de dados');
 
/* VARIÁVEL PARA VALIDAR O FORMULÁRIO */
$valida = true;
 
/* VERIFICA SE O CAMPO CODIGO FOI PREENCHIDO */
if($_POST['idusuario'] == ''){
    $retorno .= "Preencha o campo Código <br />";
    $valida = false;
}
 
/* VERIFICA SE O CAMPO NOME FOI PREENCHIDO */
if($_POST['nome'] == ''){
    $retorno .= "Preencha o campo Nome <br />";
    $valida = false;
}
 
/* SE OS VALORES FOREM VÁLIDOS, INSERE NO BANCO DE DADOS  */
if($valida){
    $idusuario = $_POST['idusuario'];
    $nome = $_POST['nome'];
 
    mysql_query("INSERT INTO usuario(idusuario, nome) VALUES ('$idusuario', '$nome')");
 
    if(mysql_affected_rows() != -1){
        $retorno = 'Dados inseridos com sucesso!';
    }
    else{
        $retorno = 'Erro ao inserir os dados';
    }
}
 
/* IMPRIME RETORNO */
echo $retorno;
 
?>

Fazemos a conexão com o banco de dados e depois uma simples validação dos dados do formulário. Se a validação estiver “OK” executamos a query no banco de dados e fazemos a inserção. Por fim, damos um echo na variável $retorno para exibir as mensagens de sucesso/erro ou os alertas.

E pronto! Sua inserção de dados no banco via AJAX já está funcionando perfeitamente.

Espero que tenham gostado

Abs.

Siga-me no twitter: @rafaelwendel

É formado em Sistemas de Informação, pós-graduado em Sistemas de Banco de Dados e mestre em Educação com foco em Tecnologias Sociocomunitárias. Trabalha como professor de ensino técnico e tecnológico no Instituto Federal de Educação, Ciência e Tecnologia de São Paulo ministrando disciplinas nas áreas de programação, banco de dados, desenvolvimento de projetos e engenharia de software.

Posts relacionados

Comentários

  2. Implementei uma técnica parecida num sistema de cobrança onde é feito a inserção e já aparece na tela o que foi inserido via AJAX e JQuery, poderia complementar com essa técnica, mostrar o que foi inserido na parte de baixo ou de cima…

    Uma crítica construtiva, se me permite. Passe a usar PDO nesses scripts que vc publica, pois como sabemos, mysql_connect(), mysql_select_db(), etc… já são desatualizados.

    Eu fico doido qnd tenho que prestar consultoria e tem sistemas que ainda usam isso.

    Parabés pelo blog, leio constantemente e já usei algumas coisas que vc publica.

    Uma boa noite.

    Responder

    1. Olá Everton, primeiramente obrigado pelo comentário e pelas críticas construtivas.

      Com relação à forma de conexão com o banco de dados, o foco do post é mostrar de forma simples como o AJAX + JQUERY funciona.

      Como trabalhar com PDO eu já abordei em outros posts.

      Se eu fosse levar em consideração todas as regras de segurança o post iria ficar muito extenso e desfocado.

      Abs

      Responder

  3. Muito boa sua explicação, me ajudou a esclarecer uma dúvida em relação a isso e, creio que vai poder ajudar muita gente, se tiver mais coisas interessantes quanto a isso, me envie por e-mail, obrigado.

    Responder

  4. Muito bom o post, fiquei uma duvida, quando faço a verificação de inserção ao banco eu faço assim:

    if(mysql_query($sql)){
    // sucesso
    }else{
    // fracasso
    }

    esse codigo “if(mysql_affected_rows() != -1)” verifica se o ultimo mysql_query foi inserido??? não conheço essa tecnica, ficaria muito feliz em entende-la…
    eu também uso o affected para verificar requisições mas so coloco ele assim:

    $consulta = mysql_query($sql); // select…
    if(mysql_affected_rows($consulta)){
    // exite o que eu procuro no banco.
    }else….

    Vou seguir os conselhos do Ewerton e estudar a biblioteca PDO aprofudadamente, mas ainda acho ela muita extensa para aplicações simples, e logo agora que tinha estudado uma grande quantidade de comandos sql kkkkkk ja tava feliz… kkkk

    Responder

    1. O mysql_affected_rows($resultado) verifica se alguma linha no banco de dados foi AFETADA (sofreu mudanças). Essa função retorna o número de linhas que foram afetadas, 0 em caso de UPDATES em que os dados nao sao alterados e -1 em caso de erro.

      É uma ótima idéia estudar PDO, por questoes de padrão, segurança e possíveis migrações de SGBD. Segue link para introdução ao PDO

      http://www.rafaelwendel.com/2011/12/tutorial-pdo-php-data-object/

      Recomendo também uma estudada no Doctrine. Isso vai facilitar a sua vida
      http://www.rafaelwendel.com/2011/05/video-aulas-de-persistencia-objeto-relacional-com-orm-framework/
      http://www.rafaelwendel.com/2011/06/video-aulas-de-doctine-orm-framework-parte-ii/
      http://www.rafaelwendel.com/2011/06/video-aulas-de-doctrine-parte-iii/

      Abs!

      Responder

  5. Gostaria de saber o seguinte este script não funcionou no IE mas pegou em todos os outros navegadores, gostaria de saber se tem algum macete.

    Obrigado.

    Responder
  6. Pingback: Preenchimento automático do endereço a partir do CEP | Blog de Tecnologia

  9. Olá Rafael, tudo bem?
    eu estou estudando ajax e js, estou desenvolvendo um form onde adiciono vários endereços com o innerHTML, e essa função só funciona com um conjunto fixo de inputs, como faço no ajax pra passar os atributos dos campos que quero modificar?

    No caso em cada vez que a função for executada, o #cep, #logradouro, #complemento, #bairro, #cidade e #uf vão ser diferentes…

    $(“#cep”).focusout(function() {
    //Início do Comando AJAX
    $.ajax({
    //O campo URL diz o caminho de onde virá os dados
    //É importante concatenar o valor digitado no CEP
    url: ‘https://viacep.com.br/ws/’ + $(this).val() + ‘/json/unicode/’,
    //Aqui você deve preencher o tipo de dados que será lido,
    //no caso, estamos lendo JSON.
    dataType: ‘json’,
    //SUCESS é referente a função que será executada caso
    //ele consiga ler a fonte de dados com sucesso.
    //O parâmetro dentro da função se refere ao nome da variável
    //que você vai dar para ler esse objeto.
    success: function(resposta) {
    //Agora basta definir os valores que você deseja preencher
    //automaticamente nos campos acima.
    $(“#cep”).val(resposta.cep);
    $(“#logradouro”).val(resposta.logradouro);
    $(“#complemento”).val(resposta.complemento);
    $(“#bairro”).val(resposta.bairro);
    $(“#cidade”).val(resposta.localidade);
    $(“#uf”).val(resposta.uf);
    //Vamos incluir para que o Número seja focado automaticamente
    //melhorando a experiência do usuário
    $(“#numero”).focus();

    }
    });
    });

    Responder
  10. Pingback: Preenchimento automático do endereço a partir do CEP com PHP - Blog de Tecnologia
  11. Pingback: Preenchimento automático do endereço a partir do CEP

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *