Carregando arquivo em Div - Ajax com Jquery

Postado por André Baptista às 04:15

Ae galera.. hoje vou demonstrar um exemplo bem simples e de grande utilidade. Vamos carregar um arquivo atráves do Jquery com o método load().
Vou usar um exemplo bem simples com 2 radio buttons onde as opções serão, Pessoa Física e Pessoa Jurídica.

Bom primeiramente vamos criar nosso arquivo html :)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="pt-br" />
<title>Jquery - Carrega Arquivo em Div</title>

<script type="text/javascript" src="/andre/abas/ui/jscripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" charset="utf-8">
/* <![CDATA[ */

 $().ready(function(){
  $("#cliente_pj").click(function() {
   $("#load").load('/andre/abas/pfpj.php?tipo=pj',carregando('#load'));
  });
  $("#cliente_pf").click(function() {
   $("#load").load('/andre/abas/pfpj.php?tipo=pf',carregando('#load'));
  }); 
 });

 var divnome;
 var carregando = function(divnome) {
  $(divnome).html("Carregando....");
 }; 

/* ]]> */

</script>

</head>
<body>
<p><strong>Tipo de Pessoa:</strong></p>
<p><input name="tp_cliente" id="cliente_pj" value="pj" type="radio"> <label for="cliente_pj">Pessoa Jurídica</label></p>

<p><input name="tp_cliente" id="cliente_pf" value="pf" type="radio"> <label for="cliente_pf">Pessoa Física</label></p>

<br />
<div id="load" style="width: 300px; height: 100px; border: 1px solid #ccc;"></div>
</body>
</html>



eu criei a função carregando onde nela vc vai passar um seletor onde vc vai querer que carregue seu arquivo.

criado nosso arquivo html, agora vamos criar um arquivo php, eu chamei ele de pjpf.php

 if(isset($_GET)) {
  if ($_GET['tipo'] == "pj") {
   echo "Pessoa Jurídica.";
  } else {
   echo "Pessoa Física.";
  }
 }

O legal disso que posso passar parametros via GET ou POST para minerar melhor os dados :)..

qualquer dúvidas ou sugestões :)

[]'s

 

Marcadores: , ,

0 Comments:

Post a Comment



Postagem mais recente Postagem mais antiga Página inicial

Subscribe to: Postar comentários (Atom)