JQuery

Em 06/05/2015 às 00:05h por Leonardo

Navegação de páginas com Ajax

Neste post vamos aprender a fazer a navegação de páginas utilizando-se do Ajax, ampliando um pouco mais os conhecimentos sobre Jquery e suas funções e aprendendo mais sobre ambientes cliente / servidor.

navegacao de paginas com ajax

Se vocês não estão em um ambiente cliente / servidor não terá como fazer funcionar o Ajax. Então se estão sem um ambiente web de desenvolvimento instalem o WampServer, o post Instalado e Configurando o WampServer 2.5 vai ajudar.

Outro item importante é ter a biblioteca Jquery.

Vamos começar, eu criei este post graças a uma dúvida postada em um comentário, isso é bem legal, receber o feedback , assim eu apreendo mais e tendo ajudar como puder .. rsrsrs

O que vamos criar, basicamente, é uma página index.html, vamos construi-las de modo que apenas o conteúdo (#content) seja atualizado após cada clique no menu de navegação, ou seja, cada vez que clicar em um link do menu o conteúdo da página destino virá para o index.html .

Bora pros códigos.... rsrsr

Olha o código html das pagina index.html

 <html> <head> <meta charset="UTF-8"/> <title> Navegação de páginas com Ajax</title> <style> #header{position: relative; width: 900px; height:230px; background-color: rgb(226, 157, 64); margin: 0px auto;} #container{position: relative;width: 900px; height:500px; background-color: #FFF; margin:0px auto;} #menu{position: relative; width:100px; height:100%; background-color: rgb(236, 236, 91); right: 0px; float: left;} #content{position: relative;width: 800px; height:100%; background-color: #D89C9C; right: 0px; float: right;} #footer{position: relative;width: 900px; height:100px; background-color: #000; margin: 0px auto} </style> <!-- > Importanto a bliblioteca jquery< --> <script src="jquery-2.1.3.js"></script> <script> $(document).ready(function(){ $(".buscarPagina").click(function(){ //Aqui estau retirando o conteudo da propriedade href “o link destino” e colocando em uma variavel var link = $(this).attr('href'); $.ajax ({ dataType: 'html', url: link, //link da pagina que o ajax buscará success: function(data) { $("#content").html(data).fadeIn(340); //Inserindo o retorno da pagina ajax }, error: function(data){ $("#content").html("<center><p>ERRO ao carregar outra pagina</p></center>").fadeIn(300); //Em caso de erro ele exibe esta mensagem } }); }); }); </script> </head> <body> <div id="header"> <h1> Navegação de páginas com Ajax</h1> </div> <div id="container"> <div id="menu"> <a href="index.html" >index</a> <br/> <!-- >Aqui é importate precisamos no atentar para a class usada , pois é através dela que desparamos o evento click e também o retorno false em onclick para que a página não de refresh quando clicado<--> <a onclick="return false;" href="pagina_um.html" class="buscarPagina" >página um</a> <br/> <a onclick="return false;" href="pagina_dois.html" class="buscarPagina" >página dois</a> </div> <div id="content"> <center><h1>Página Index.</h1></center> </div> </div> <div id="footer"></div> </body> </html>

Agora a outra página, pagina_um.html:

 <div style=”{margin: 0px auto;}”> <h1>Esta já é a pagina um....</h1> </div>

Agora a outra página, pagina_dois.html:

 <div style=”{margin: 0px auto;}”> <h1>Esta já é a pagina dois....</h1> </div>

O que esta sendo feito no código javascript é bem simples, primeiro dizemos que estamos selecionando o documento atual, com seus elementos, * $(document).ready(...

Depois criamos o evento, * $(‘. buscarPagina’).click(.... ou seja, toda vez que clicarmos em um elemento com esta classe acontecerá os seguintes procedimentos.

Agora criamos uma variável chamada link para armazenar o valor da propriedade href do elemento que clicamos, por isso o “this”->”este”, fica assim $(this).attr(‘href’)... A função attr é a responsável por me dar o valor da propriedade que passo para ela como parâmetro.

Pronto só solicitar a página por Ajax agora, temos que ficar atendo para três coisas:

no parâmetro url: precisa passar a variável criada (link),
é preciso ter cuidado onde você quer inserir o conteúdo que vem de outra página, já que tudo dentro da DIV selecionado será substituído pelo retorno Ajax.
e no retorno precisamos inserir elementos do tipo .html() com a função .fadeIn();

Você pode implementar mais coisas com Ajax, por exemplo enviar parâmetros para página requisitada, por POST, e utilizar estes para algum processamento que dependa deles, e retornar os resultados.

Então é isso, se quiserem o arquivo pronto baixem aqui.

Qualquer dúvida, sugestão, criticas ou correções comentem aqui que teremos o prazer em ajudá-los. =)

Olá, deixe seu comentário para Navegação de páginas com Ajax

Já temos 5 comentário(s). DEIXE O SEU :)

Eliezer Martins

Muito bom. show de bola. sem embaraços e funciona 100%. meu muito obrigado...

★★★★★DIA 14.12.16 15h141 GOSTEI :)RESPONDER

Leonardo Martins

Muito obrigado pelo seu comentário e que bom que gostou....

★★★★★DIA 19.12.16 16h010 GOSTEI :)RESPONDER

N/A

Layana Cristina

Muito bom o post, porém quando clica-se no link index tudo atualiza, com refresh, e ai é o problema, se tem um musica na páinga index ela atualiza, aí é onde tá o problema, como faço para que a página inicial não atualize? pois nela preciso que o player toque sem atualizar.

★★★★☆DIA 08.10.16 10h400 GOSTEI :)RESPONDER

N/A

Leonardo Martins

Boa tarde, obrigado pelo comentário, bom você pode aplicar a mesma lógica pra chamar sua index, ou seja, da mesma maneira que você chama as outras páginas pelo ajax, você tbm pode chamar a index, basta dar uma adaptada no código!

★★★★★DIA 28.10.16 14h110 GOSTEI :)RESPONDER

N/A