Assumindo que todos tenham já o jQuery e saibam implementá-lo descreverei abaixo como utilizar o AJAX:
Crie a seguinte página como exemplo:
Crie o arquivo index.html
<html>
<head>
<title>AJAX com jQuery</title>
<style type="text/css">
#link {
float: left;
height: 30px;
width: 100px;
border: 1px solid #000;
}
#link a{
text-decoration:none;
}
#top {
float: none;
height: 30px;
width: 306px;
text-align: center;
display: block;
}
#conteudo {
height: 50px;
width: 302px;
border: 2px solid #000;
text-align: center;
padding-top: 10px;
}
</style>
<script type="text/javascript" src="jquery.js"></script><!--jQuery -->
<script type="text/javascript">
$(document).ready(function(){ //sempre que for trabalhar jQuery a primeira linha do código deve conter
//$(document).ready(function(){ e fecha com })
$('#link a').click(function(){//Aqui é quando você clicar no link
texto = $(this).attr("href") // pega o atributo href do link clicado, pode ser quaisquer atributo
$.ajax({method:"get", //método a ser adotado
url:"conteudo.php", // página para onde será enviado o post
data:"pag="+texto, //dados a serem considerados pela página da url
beforeSend: function(){ // antes de enviar fazer isso
$("#conteudo").html("Antes de enviar")},
complete: function(){//quando completar a envio execute isso
},
success: function(html){// se deu tudo certo execute isso
$("#conteudo").html(html).show("slow")//nome da div onde colocarei o retorno da url, o html é a própria página da url
}
})//fim ajax
return false // anula a função do link
})
})
</script>
</head>
<body>
<div id="top">
<div id="link"><a href="teste">teste</a></div>
<div id="link"><a href="AJAX">Ajax</a></div>
<div id="link"><a href="jQuery">jQuery</a></div>
</div>
<div id="conteudo">Aqui vai aparecer o href do link </div>
</body>
</html>
Depois crie o arquivo conteudo.php<head>
<title>AJAX com jQuery</title>
<style type="text/css">
#link {
float: left;
height: 30px;
width: 100px;
border: 1px solid #000;
}
#link a{
text-decoration:none;
}
#top {
float: none;
height: 30px;
width: 306px;
text-align: center;
display: block;
}
#conteudo {
height: 50px;
width: 302px;
border: 2px solid #000;
text-align: center;
padding-top: 10px;
}
</style>
<script type="text/javascript" src="jquery.js"></script><!--jQuery -->
<script type="text/javascript">
$(document).ready(function(){ //sempre que for trabalhar jQuery a primeira linha do código deve conter
//$(document).ready(function(){ e fecha com })
$('#link a').click(function(){//Aqui é quando você clicar no link
texto = $(this).attr("href") // pega o atributo href do link clicado, pode ser quaisquer atributo
$.ajax({method:"get", //método a ser adotado
url:"conteudo.php", // página para onde será enviado o post
data:"pag="+texto, //dados a serem considerados pela página da url
beforeSend: function(){ // antes de enviar fazer isso
$("#conteudo").html("Antes de enviar")},
complete: function(){//quando completar a envio execute isso
},
success: function(html){// se deu tudo certo execute isso
$("#conteudo").html(html).show("slow")//nome da div onde colocarei o retorno da url, o html é a própria página da url
}
})//fim ajax
return false // anula a função do link
})
})
</script>
</head>
<body>
<div id="top">
<div id="link"><a href="teste">teste</a></div>
<div id="link"><a href="AJAX">Ajax</a></div>
<div id="link"><a href="jQuery">jQuery</a></div>
</div>
<div id="conteudo">Aqui vai aparecer o href do link </div>
</body>
</html>
<?php
if(isset($_GET["pag"])) {
$conteudo = $_GET["pag"];
echo $conteudo;
}
?>
if(isset($_GET["pag"])) {
$conteudo = $_GET["pag"];
echo $conteudo;
}
?>
É muito mais fácil usar AJAx com jQuery do javascript puro, segue o link para download do exemplo pronto Exemplo
Nenhum comentário:
Postar um comentário