Preenchendo uma ComboBox Ajax e Json

Munidos de nossos conhecimentos sobre DOM e JSON, começaremos agora aver como realizar tarefas simples, como por exemplo preencher uma ComboBox dinamicamente.

Por | @oficinadanet Programação
  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



ComboBox Dinâmico Com Ajax






Rio de Janeiro

São Paulo

Minas Gerais








  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


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.





Mais sobre:
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo