Nesse exemplo tem o básico só para causar o entendimento mesmo.servirá para suas aplicações em que você deseja que não haja carregamento de página. Dividi em 3 arquivos, preste atenção nos comentários para entender melhor.
- index.php
- carregar.js
- dados.php
No index.php contém uma: [DIV id=FORM],[DIV id=MOSTRAR, display:none;] e os inputs com CLASSes definidas.
<div id="form">
<input type="hidden" name="nome" value="Marcos" class="nome" />
<input type="submit" name="exibir" value="Minhas Informações" class="exibir" />
</div><!--FORM-->
<div id="mostrar" style="display:none;"></div>No head do index.php deve existir o link pro JQuery e pro carregar.js que mostro logo abaixo
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="carregamento.js"></script>carregar.js
/*prestar atenção na utilização dos parenteses e chaves*/
/*iniciamos com $ pra chamar o JQuery e dentro dele iniciamos uma função*/
$(function(){
/*se clicar na tag de class exibir, iniciamos um uma "sub-função"*/
$(".exibir").click(function(){
/*escondemos com fadeOut a tag com id form, podiamos usar tb o hide("fast ou slow"), o 10 é a velocidade a escondê-la*/
$("#form").fadeOut(10);
/*definimos as variaveis e informaos as class de CSS contém um valor .val*/
var nome = $(".nome").val();
var exibir = $(".exibir").val();
/*setamos o método POST informamos o arquivo PHP que irá retornar as informaçoẽs, para isso criamos a function retorno, e passmos variavel que criamos e informamos o nome dela*/
$.post("/assets/html/subhtml/dados.php", {nome: nome, exibir: exibir}, function(mostrar){
/*a div mostrar que estava com display none agora será exibida, pois nela estará os dados do dados.php*/
$("#mostrar").fadeIn(2000).html(mostrar)
});
});
});dados.php
<?php
extract($_POST);
if(isset($exibir)){
echo "O valor do nome é: ".$nome;
}else{
echo "Sem valor no isset";
}
?>Esse é o básico, mas só com isso pode-se ir “Ao infinito e Além”, só depende de você essa evolução!
