![[logo-gigasystems]](https://www.gigasystems.com.br/themes/webdesign/images/gigasystems-webdesigner.png "Home - Gigasystems Soluções Inteligentes")
PHP
Como usar Ajax com Jquery
No artigo de hoje iremos aprender como manipular dados com Ajax e Jquery para fazermos pesquisas no Banco de Dados dinamicamente sem reload da página.
Com Ajax é possível diminuir a quantidade de reloads e refresh (carregamento de páginas), em seus projetos web.
Quem já começou a desenvolver para web se deparou com a seguinte situação, exemplo:
- Preciso fazer um determinado relatório ele exibirá uma quantidade de registro que estão entre um determinado período. Até ai sem problemas, acontece que você irá buscar o relatório após clicar no botão pesquisar de um formulário, o qual passará por POST as datas iniciais e finais como parâmetro.
O que acontece após clicar no botão Pesquisar (Button)?
No modelo mais tradicional escreveríamos outra página em PHP para trazer os resultados, ou na melhor das hipóteses teríamos que dar um reload(recarregar) na mesma página para exibir os resultados.
Perceba que você teve que requisitar o servidor, passar para ele os POSTs do formulário, e por fim carregar outra página, isso aconteceu com o lado cliente apenas observando todo o processo.
Você pode estar pensando, mas isso esta funcional, então esta certo!?
Sim, esta correto, mas existe um grande problema em fazer reloads de páginas, você tem que reprocessar tudo que esta nela, como por exemplo, cabeçalhos, menus, banners, imagens.
Isso gera mais processamento do seu servidor e mais alocação de banda também, podendo ocasionar lentidão em sua aplicação.
O que fazer então?
O Ajax entra nesse ponto, com ele podemos atualizar dados dentro de uma mesma página, ou seja, eu pego uma parte da página e insiro os dados que eu quiser. Com Ajax você irá fazer uma requisição ao servidor de uma determinada página, levando até ela as informações necessárias e trazendo um resultado para a página em que estamos isso sem refresh ou reloads, sem ler tudo novamente, e utilizando de recursos da maquina do lado cliente.
OBS:
- O Ajax esta na biblioteca Jquery e no exemplo a seguir utilizaremos a biblioteca 2.x, para baixa-la acesse //jquery.com/download/ e clique no link Download the uncompressed, development jQuery 2.1.1 .
- Se você não conhece manipulação básica de Jquery, por favor, acesse o artigo Efeitos de Animação em Jquery, ela te ajudará com as noções básicas de comando e estrutura javascript para o uso de Jquery.
CONCEITOS
- AJAX é acrônimo em língua inglesa de "Asynchronous Javascript and XML", que em português significa "Javascript e XML Assíncronos". Designa um conjunto de técnicas para programação e desenvolvimento web que utiliza tecnologias como Javascript e XML para carregar informações de forma assíncrona.
- O criador do termo AJAX foi o pesquisador norte-americano Jesse James Garrett. Desde que o modelo AJAX começou a ser utilizado, é visto como uma ferramenta revolucionária, que torna mais agradável a navegação e utilização de serviços diversos na internet.
- O desenvolvimento em AJAX permite a criação de páginas mais criativas e com maior interação com o usuário. A sua utilização foi importante para a criação do conceito Web 2.0 que tornou a experiência do usuário mais interessante e proveitosa.
- Alguns serviços do Google como o Gmail, Google Earth e Google Maps fazem uso das ferramentas AJAX.
- Ao usar AJAX no desenvolvimento de serviços para web, à informação é carregada de maneira mais simples e precisa. O usuário não precisa aguardar que a página seja totalmente recarregada quando faz uma requisição, pois o servidor só irá retornar os dados relevantes, reduzindo o tráfego de dados pela rede.
Referencia: //www.significados.com.br/ajax/
“Bora” programar... rsrsrs....
Primeiro passo vamos produzir nosso banco de dados, vamos fazer um sobre venda de veículos, pra isso vamos criar o banco (_bdVeiculo) e vamos inserir uma tabela (_veiculos), com os campos (idVeiculo, modelo, marca, vendido, dataVenda, vlrVenda). Abaixo tem o código com os tipos de cada campo, também vamos criar uma stored procedure, ela pesquisará todos os veículos vendidos entre determinado período (mais em Stored Procedures). Neste modelo estamos utilizando o SGBD MySql. E como ferramenta o Workbench.
DROP DATABASE IF EXISTS _bdVeiculo; CREATE DATABASE _bdVeiculo; USE _bdVeiculo; DROP TABLE IF EXISTS _veiculos; CREATE TABLE _veiculos( idVeiculo INT PRIMARY KEY AUTO_INCREMENT, modelo VARCHAR(100) NOT NULL, marca VARCHAR(50) NOT NULL, dataVenda DATE, vendido BOOLEAN )ENGINE=InnoDb; INSERT INTO _veiculos(modelo, marca, dataVenda, vendido) VALUES ('CORSA', 'GM-CHEVROLET', '2014-10-11', TRUE), ('SENDEROS', 'RENAUT', '2014-11-20', TRUE), ('CIVIC', 'HONDA', '2014-09-10', TRUE), ('GOL', 'VOLKSWAGEM', '2014-09-05', TRUE); DROP PROCEDURE IF EXISTS pesquisaVendidos; DELIMITER $ CREATE PROCEDURE pesquisaVendidos(IN dataInicial DATE, IN dataFinal DATE) BEGIN SELECT * FROM _veiculos WHERE (dataVenda >= dataInicial AND dataVenda <= dataFinal) AND vendido = TRUE ORDER BY marca ASC; END; $ Agora vamos fazer a página index em html mesmo, mas ao salva-la coloque a extensão (.php).
<html> <head> <!-- tag meta, já escrita anteriormente --> <meta charset="utf-8"/> <!-- titulo da página na aba do browser --> <title>JQUERY().AJAX()</title> <!-- Link para o arquivo css , no href você terá o caminho para o arquivo css onde fizemos os estilo da página, temos que colocar o caminho / nome do arquivo.extensão --> <link rel="stylesheet" type="text/css" href="css/style.css" /> <!-- Agora precisamos colocar o link da biblioteca jquery --> <script language="JavaScript" src="js/jquery-2.1.1.js"></script> <!-- Inicio do nosso código Jquery().AJAX() --> <script> //Aqui inicio do código Jquery $(document).ready(function(){ //Aqui codigo ajax }); </script> </head> <body> <h1> APRENDENDO JQUERY().AJAX() BÁSICO </h1> <form name="pesquisar" id="pesquisar" method="POST"> <fieldset id="formulario"> <legend>Pesquisar Carros Vendidos por Datas</legend> Data Inicial: <input type="date" name="dataInicial" id="dataInicial"/> Data Final: <input type="date" name="dataFinal" id="dataFinal" /> <input type="button" id="click" name="click" /> </fieldset> </form> <div id="show"> <div id="load"></div> <!-- Aqui ficaram os retornos da pesquisa feita através do Ajax --> <div id="resultados"></div> </div> </body> </html> Para que os campos fiquem mais bonitos você terá que estiliza-los com css, caso vc num queira estiliza-los, baixe aqui o meu arquivo style.css, coloque em uma pasta chamada css e a armazene na pasta do projeto.
Agora faremos uma página em php, essa página recebera os POST do formulário de pesquisa acima, e fará a consulta no banco de dados, com o retorno da pesquisa faremos um layout e mandaremos exibir em um echo, esse echo será o retorno para a função Ajax, e ela se encarregará de exibir na tela índex o resultado.
Para fazermos a pesquisa no bando de dados vamos precisar fazer uma conexão com o banco, para isso eu utilizo uma classe conexão, ela esta sob os paradigmas de PDO, (veja mais sobre PDO e Conexões com banco de dados), baixe no final do artigo o arquivo completo e com o arquivo conexão e altere os valores de senha, usuário, porta de acesso e nome do banco se forem necessários, e guarde esse arquivo em uma pasta dentro do projeto chamada “class”, mantenha o nome do arquivo como “Conexao.php”.
Agora vamos fazer o arquivo pesquisaPorData.php, você pode utilizar o notePad++ para escreve-lo, faça-o e por questões de organização de projeto, crie uma pasta chamada pages, e o salve nela.
O arquivo será assim:
<?php //Aqui estamos recebendo os POST, caso eles venham vazios colocamos o valor de string vazio "" $dataInicial = isset($_POST['dataInicial']) ? $_POST['dataInicial']:""; $dataFinal = isset($_POST['dataFinal']) ? $_POST['dataFinal']:""; //Esta variavel armazenera o retorno desta página $retorno = "" ; //Primeiro testamos se as datas foram preenchidas, caso uma delas estejam vazias uma mensagem de aviso é colocada no $retorno if($dataInicial != "" && $dataFinal != "") { //Vamos requerir o arquivo de Conexao require_once('../class/Conexao.php'); //Instanciamos o objeto de conexao com o banco de dados $conexao = new Conexao(); //Solicitamos a conexao com o banco de dados $conexao->conectar(); //colocamos dentro de uma variavel o comando SQL o qual trara os retornos, lembra tinhamos feito uma procedure para isso //Portanto aqui estamos chamando o retorno da procedure pelo camando CALL $sql = "CALL pesquisaVendidos('".$dataInicial."', '".$dataFinal."')"; //Executando o camando select da classe conexao, ele retornara os resultados do banco na variavel $resultados $resultados = $conexao->select($sql); //Testamos verificando a existencia de resultados, se tiver vamos montar o relatorio de resultados, se não mensagem de sem carros if(count($resultados)){ //Antes de começarmos a montar o relatório vamos fazer um cabeçalho para a tabela de resultados $retorno .= "<div id='relatorio'><table><tr class='titulo'><td>MODELO</td><td>MARCA</td><td>DATA DE VENDA</td></tr>"; //Agora iremos fazer uma iteração sobre os valores de retorno do banco, para isso iremos usar o foreach //Para usar os retornos dos campos temos que colocar os nomes dos campos do banco dados //Eu fiz um contador para ir mudando a classe da linha da tabela, dessa maneira com a formatação css, ela ficara com cores alternadas $cont = 0; foreach($resultados as $res){ //Teste para saber se o contador eh par ou impar dependendo do resultado ele dara um nome para a classe da linha da tabela if($cont % 2 == 0) { $classe = "CorPar"; } else { $classe = "CorImpar"; } //Para os campos datas usamos uma função em php que coloca em padrões Brasileiro de datas, ou seja, dia/mes/ano $dataVenda = daté("d-m-Y", strtotime($res['dataVenda'])); //Aqui concaténamos todo o resultado, na tabela do relatorio. $retorno .= "<tr class='".$classe."'><td>".$res['modelo']."</td><td>".$res['marca']."</td><td>".$dataVenda."</td></tr>"; //somamos mais um ao contator $cont++; } //Fechando a tabela $retorno .= "</table></div>"; } else { $retorno .= "<div id='erroRelatorio'><h2>Não existem carros vendidos para o período</h2></div>"; } //Solicitamos a desconexao com o banco de dados $conexao->desconectar(); }else { $retorno .= "<div id='erroRelatorio'><h2>As datas Iniciais e Finais precisam estar preenchidas</h2></div>"; } //Por damos o camando echo nesta página, o ajax reconhece que essa página deve ser retornada a tela principal, //Com o comando echo o que retorna aqui é o relatório ou as mensagens dos else(s); echo $retorno; ?> Agora já temos o arquivo de retorno do .ajax, só falta agora programarmos a função .ajax em si.
Entre as TAGs <script></script> na <head></head> no arquivo index.php e após já ter lincado o arquivo Jquery, vamos fazer a programação da função em ajax(), veja abaixo:
<!-- Inicio do nosso código Jquery().AJAX() --> <script> //Aqui inicio do código Jquery $(document).ready(function(){ //Primeiro criaremos a função que exibe a imagem em gif do loading function loading_show(){ $('#load').fadeIn('fast'); } //Agora é a vez de criar a função que esconde a imagem da gif de loading function loading_hide(){ $('#load').fadeOut('fast'); } //Agora faremos o evento que chama a função ajax, esse evento é o click do botão(button) do formulário $('#click').click(function(){ //Apos clicar no botão vamos armazenar os valores dos campos dele em uma variavel, para isso usamos um camando chamdo //serialize() no formulario que contenha os dados var valores = $('#pesquisar').serialize(); //Esta é a função Ajax// Seu inicio é por essa sintaxe $.ajax ({ type: 'POST', //Esta propriedade diz que tipo de interação faremos entre os dados, neste caso por POST dataType: 'html', //Tipo de retorno que tera o ajax, neste caso retornaremos um tipo html, página em html url: 'pages/pesquisaPorData.php', //Qual página o ajax ira buscar beforeSend: function(){//Chama a função para mostrar a imagem gif de loading antes do carregamento loading_show(); }, data: valores, //Este são os valores do POST do formularios, neste caso as datas success: function(retorno) //Em caso de sucesso da função .ajax ele retornara para a var retorno { loading_hide(); //Função que esconde novamente a imagem do gif de loading $('#resultados').html(retorno).fadeIn(); //Aqui estamos inserido o conteudo de retorno na local indicado }, //Aqui poderiamos programar uma execeção, um tipo de retorno caso tenhamos falha na exception função .ajax error: function(error) { loading_hide(); //Função que esconde novamente a imagem do gif de loading $("#resultados").html(error).fadeIn(); //Aqui estamos inserido o conteudo de erro no local indicado } }); }); }); </script> Pronto, agora é só montar todo o projeto dentro da pasta www, la do WAMP (Se não tem o WAMP, leia o artigo sobre sua instalação, como estamos trabalhando com programação php e banco de dados ele se faz necessário.
Ficou assim a pasta do projeto. Pasta js com o arquivo jquery 2.x, pasta css com o arquivo style.css, a pasta pages com a página pesquisaPorData.php, e por fim a pasta class com o arquivo de Conexao.php, e na pasta raiz o arquivo index.php.
Este tutorial mostrou como fazer uma conexão Jquery().Ajax(), e faze-la trazer de volta uma outra página. Você pode extrapolar os resultados, mudar evento de como chama-se a função Ajax(), a criatividade é por sua conta... rsrsrs.
Você pode ter tido alguma dificuldade durante este tutorial, eu recomendo alguns outros para melhor entendimento, são eles:
Efeitos de animação em Jquery.
Criando um Banco de Dados MySql.
Instalando e configurando o WampServer 2.5.
Stored Procedures e Functions.
Existem outros comandos no .ajax(), outros meios de usar, pra quem quer aprender mais, sugiro que entrem no site //api.jquery.com/ , lá tem toda documentação necessária.
Você pode baixar o exemplo completo Aqui.
Se tiverem sugestões, duvidas ou reclamações comentem..... e bons estudos!!!
Olá, deixe seu comentário para Como usar Ajax com Jquery
Everton J Paula
Géberson Cardoso obrigado pelo comentário. Eu entendi a sua dúvida e achei legal fazer um POST sobre ela, Navegação de páginas com Ajax, acesse ele pelo link.
Se a dúvida ainda persistir por favor comente novamente, terei o prazer em tentar ajudar.
Géberson Cardoso
Primeiro parabéns pelo artigo, ficou muito bom.
Segundo queria pedir ajuda para um problema que estou enfrentando com ajax e jquery. É o seguinte ...
Eu tenho uma página que ficou dividida da seguinte maneira (estou no serviço e não tenho o código fonte para mostrar): Uma div cabeçalho ==>>
O problema que estou encontrando está na div principal ==>>
Bom, vamos direto pra o problema agora. Eu preciso que, sempre que um link no menu lateral for clicado, o conteúdo referente ao link (página1, página2, página3, etc.) seja carregado na div conteudo ==>>
OBS.: Já li vários tutoriais sobre o assunto, porém sou iniciante em HTML, Jquery, Ajax e javaScript. Acredito que o material que eu li está numa linguagem para pessoas mais experientes no assunto e por isso não consigo entender e resolver esse problema. Pode me ajudar com esse problema por favor?
arthur
Marcos Martins
Gigasystems Login:
Informe seu e-mail abaixo para continuar!
XVeja Também:
Artigos Relacionados a categoria: PHP
Cotações para compra e venda de Moedas estrangeiras com PHP
27 July de 2016
Gerenciador de dependências Composer
14 January de 2016
Erro ao acessar um arquivo externo com o comando file_get_content
04 November de 2015
Baixando anexo do email no servidor com IMAP e PHP
27 August de 2015
...CURTIU? AINDA NÃO VIU NOSSO PORTFÓLIO?
Se ainda não viu nosso Portfólio e quer conhecer um pouco mais... aproveite, veja agora mesmo nossos Cases de Sucesso e tenha seu site nos padrões atuais preparado para maioria dos dispositivos e navegadores.
Usamos cookies para manter o site seguro, registrar e personalizar sua navegação. Para mais detalhes sobre essa atividade, acesse nossa Politica de Privacidade
Entendi