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
Essa eu ja sabia mas vai ajudar muita gente. vlw
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.
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
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.
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
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!
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.
Muito obrigado pela ajuda !
Vc explicou de forma simples e muito objetiva.
Muito boa a explicação e me foi muito útil.
Obrigado.
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();
}
});
});
Olá Max,
Para usar JQuery com AJAX em campos dinâmicos, tente colocar na sua primeira linha assim:
Abs!