Oficina da Net » Desenvolvimento » Ajax

Preenchendo uma ComboBox Ajax e Json

Novo aqui no site? Talvez gostaria de assinar o
RSS feed do site?

Publicado em: 29/06/2007
Área: Ajax
Visualizações: 8.510
Comentário(s): 1

imprimir envie por e-mail compartilhe
  Preencher uma ComboBox com contúdo carregado assicrinamente pode parecer difícil, mas acredite é muito fácil.
  A partir desse exemplo você será capaz de preencher qualquer elemnto de formulário dinamicamente com AJAX, tornando suas aplicações mais versáteis.
  Bom vamos ao código, lembrando que utilizareos JSON, mas se você preferir pode utilizar XML também.

Arquivo : times.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ComboBox Dinâmico Com Ajax</title>
<script language="javascript" src="times.js"></script></head>

<body>

<form name="form1">
<fieldset>
<input type="radio" name="estado" value="rj" onclick="getDados(this.value);"  />Rio de Janeiro

<input type="radio" name="estado" value="sp" onclick="getDados(this.value);"  />São Paulo

<input type="radio" name="estado" value="mg" onclick="getDados(this.value);"  />Minas Gerais
<div id="times">
</div>
</fieldset>
</form>


</body>
</html>
  Agora criaremos um arquivo JavaScript.
Arquivo : times.js
// JavaScript Document

var request = null;
try {
  request = new XMLHttpRequest();
} catch (trymicrosoft) {
  try {
    request = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (othermicrosoft) {
    try {
      request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (failed) {
      request = null;
    }
  }
}

if (request == null)
  alert("Não foi possível criar o objeto !");


function getDados(estado) {
  var url = "times.php";
  url = url + "?estado="+estado;
  url = url + "&cache=" + new Date().getTime();//para evitar problemas com o cache do navegador
  request.open("GET", url, true);
  request.onreadystatechange = exibe;//chame a função sem os parênteses
  request.send(null);
}

function exibe(){
if (request.readyState == 4) {//verifica o estado de prontidão
    
if (request.status == 200) {//verifica o status da requisição

//recupera os dados e os converte em um objeto
var jsonData = eval('(' + request.responseText + ')');
//o navegador trata a JSON com texto, portanto utilize o responseText

/**
* agora nós usaremos o DOM para criar um combobox dinâmicamente,
* e preencheremos esse combo com os dados
**/

var divTimes = document.getElementById("times"); //obtemos o elemento pai
//limpa o conteúdo da div
divTimes.innerHTML = "";
var elemSel = document.createElement("SELECT");

for(i=0; i < 4; i++){
var elemOpt = document.createElement("OPTION");
var text    = document.createTextNode(jsonData.times.nome); //recupera o nome dos times
elemOpt.setAttribute("value",jsonData.times.sigla);    //preenche o valor do option
elemOpt.appendChild(text);    //anexa o texto ao elemento
elemSel.appendChild(elemOpt);    //anexa o option ao select

}


divTimes.appendChild(elemSel);        //anexa o select ao elemento pai

}
}
}
e por fim o script PHP que receberá a soloitação
<?php header("Content-Type: text/html; charset=ISO-8859-1"); ?>

<?php
require("JSON.php");  //importando a biblioteca

$json = new Services_JSON();//criando o objeto para manipular a JSON

$estado = $_GET['estado" target="_blank">;

if($estado == 'rj'){
$time1 = array('nome'=> "Flamengo",
  'sigla'=> "FLA");
$time2 = array('nome'=> 'Vasco',
  'sigla'=> "Vas");
$time3 = array('nome'=> "Fluminense",
  'sigla'=> "FLU");
$time4 = array('nome'=> 'Botafogo',
  'sigla'=> "BOT");
}

if($estado == 'sp'){
$time1 = array('nome'=> "Corinthians",
  'sigla'=> "COR");
$time2 = array('nome'=> "Sao Paulo",
  'sigla'=> "SPO");
$time3 = array('nome'=> "Santos",
  'sigla'=> "SAN");
$time4 = array('nome'=> "Palmeiras",
              'sigla'=> "PAL");
}

if($estado == 'mg'){
$time1 = array('nome'=> "Cruzeiro",
  'sigla'=> "CRU");
$time2 = array('nome'=> "Atletico",
  'sigla'=> "CAM");
$time3 = array('nome'=> "America",
  'sigla'=> "AMG");
$time4 = array('nome'=> "Ipatinga",
              'sigla'=> "IPA");
}


$times = array('times' => array($time1, $time2, $time3, $time4));

$output = $json->encode($times);
echo($output);

?>

  Esse é exemplo bem simplório, mas você poderia estar buscando os dados em Banco ou outro repositório.

Até a próxima.







Clique aqui para comentar comentários
Preencha o formulário para comentar:
Nome:*

E-mail:* (não será exibido)

Site: (http://)

Comentário:*

Deseja receber os comentários no e-mail?

Anti-spam: (nova imagem)





Jesus

   - Publicado em: 01/07/2008 - 10:43

Tirando os erros de português, a matéria está boa.

 

Autor da matéria
Ramon Ferreira Silva
» site do autor
Ramon Ferreira Silva
Estudante de Sistemas de Informação, estudou no CEFET/RJ e hoje trabalha com ASP, ASP.NET, PHP e AJAX.

Todas as matérias de Ramon Ferreira Silva

Publicidade
Seguir o Oficina da Net
RSS

RSS

RSS
Top matérias do mês
Matérias relacionadas
Destaque
Tags

© 2005 - 2009 - Oficina da Net - v 4.0 - É proibida a reprodução parcial ou completa do conteúdo deste site sem autorização por escrito. Resolução adequada: 1024x768px.

Parceiros: Bahia em Foco  |  Blog do Vicente  |  BuscaKi  |  Chongas  |  ClicRN  |  Código Fonte  |  Coletânea de ícones  |  Comunicação Digital  |  Concurso Público  |  Concursos  |  Criação de sites  |  CriarWeb  |  Downloads  |  Fontes Grátis  |  GMasters  |  Hospedagem  |  Hospedagem de sites  |  Ícones  |  Infonet News  |  iParaiba  |  JLAMIM  |  MX masters  |  Notebook  |  Portal Super  |  Profissionais de Web  |  Qualidade Brasil  |  Renan Lima  |  SEO Master  |  Sonhos  |  tutoriais.org  |  WebLivre  |  Zoom Digital