Preenchendo uma ComboBox Ajax e Json

Canal: Ajax  |  Autor: Ramon Ferreira Silva  |  Publicado em: 29/06/2007  |  Views: 13.730
  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" rel="nofollow" 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.





Creative Commons Esta obra está licenciada sob uma Licença Creative Commons. Você pode copiar, distribuir, exibir, executar, desde que seja dado crédito ao autor original (Citando nome do autor, data, local e link de onde tirou o texto). Você não pode fazer uso comercial desta obra. Você não pode criar obras derivadas.
Vote no artigo:
NR. DE VOTO(S): [3]

Compartilhe:

[x] Fechar Preencha os campos abaixo para indicar esta página:
Seu nome:
Seu e-mail:
Nome do indicado:
E-mail do indicado:
Deixe uma mensagem:
Anti-spam:

(nova imagem)
Preencha o que vê:
Twitter diHITT Facebook delicious envie por e-mail comentar

comentarComentários:

Preencha o formulário para comentar:

[x] Fechar
Nome:*
E-mail:* (não será exibido)
Site: (http://)
Comentário:*
Anti-spam:

(nova imagem)
Preencha o que vê:

Deseja receber as respostas dos comentários

Jesus
Publicado em:
01/07/2008 - 10:43
Jesus
Tirando os erros de português, a matéria está boa.