jquery

A mais ou menos um ano trás eu havia comprado um livro sobre Ajax, era a época da Web 2.0 (uma febre).

Hoje? Me arrependo completamente de ter comprado aquele livro e ter aprendido a manipular o XmlHttpRequest  na mão que nem um maluco!

Não me arrependo de ter aprendido Ajax na unha mas sim de ter gastando dinheiro =p.

JQuery: esse cara é tão fascinante e quem já conhece sabe.

Mas vamos ao que interesse antes, para os mais novos se familiarizarem segue a baixo um exemplo de código comentado (clique para ampliar):

jquery-exemplo
Imagem Retirada e Traduzida de webdesignerwall.com

Agora que vocês estão mais íntimos, vamos para o assunto principal, entender como funciona o método Post() e por em prática! Primeiro a sintaxe:

jQuery.post( url, [data], [callback], [type] )
  • URL -> A página para qual você quer fazer a requisição (método POST)
  • [data] ->  dados a ser passado no POST
  • [callback] -> Função à ser executada quando os dados são carregados com sucesso
  • [type] -> Tipo de dado à ser retornado pela função de callback  pode ser: “xml”, “html”, “script”, “json”, “jsonp”, ou “text”.
    O padrão é string.

Primeiramente nós temos que incluir a biblioteca (jquery) na nossa página:

<script type="text/javascript" src="jquery-1.3.2.js"></script>

Agora temos o formulário:

<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome"><br>

<label for="idade">Idade:</label>
<input type="text" id="idade" name="idade"><br>

<input type="submit" value="Cadastrar" id="cadastrar">

<div id="resultado">
</div>

<!-- Não esqueçam de usar o atributo "id" ele é importante -->

A página php com a função:

$nome = $_REQUEST['nomeUser'];
$idade = $_REQUEST['idadeUser'];

// comando para inserir os dados no banco de dados

if($return == true){
echo "Sucesso!";
}else{
echo "Error!";
}

Agora o famoso Jquery:

$(document).ready(function(){
 $('cadastrar').click(function(){

 // Pega o valor dos inputs
 var nome = $('#nome').val();
 var idade = $('#idade').val();

 // O DIVINO
 $.post('cadastrarUser.php', {nomeUser: nome, idadeUser: idade}, function(data){
 $('#resultado').text(data)}
  ); // Fim do POST
 }); // Fim do Click
}); // Fim do Document Read

Pronto seja feliz!

Dica:

Segue uma imagem a baixo com a maioria das funções do Jquery, se não todas, é muito bom para lembrar (clique para ampliar, não lembro de onde peguei ela, por isso não tem a fonte).

Jquery-BoardFonte: Meus Favoritos

P.S.: Esses códigos foram feitos para propósito de exemplos, não testei, caso tenha algum erro por favor comentem.

Abraços.

Posts Relacionados

Imprimir Post Imprimir Post