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

  1. 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.

    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

  2. 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.

  3. 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

    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!

  4. 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.

  5. 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();

    }
    });
    });

Deixe um comentário

O seu endereço de e-mail não será publicado.