Passando dados via POST com JQuery

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.


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!


javascript


Compartilhe


Nosso canal no Youtube

Inscreva-se


Marcos Oliveira

Marcos Oliveira

Desenvolvedor de software
https://github.com/terroo

Artigos Relacionados




Crie Aplicativos Gráficos para Linux e Windows com C++

Aprenda C++ Moderno e crie Games, Programas CLI, GUI e TUI de forma fácil.

Saiba Mais

Receba as novidades no seu e-mail!

Após cadastro e confirmação do e-mail, enviaremos semanalmente resumos e também sempre que houver novidades por aqui para que você mantenha-se atualizado!