Programação » PHP

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.

Publicado em: 29 de junho de 2007  |  Leituras: 15.412  |  Canal: PHP  |  Autor: Ramon Ferreira Silva
  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.





Resposta em até 24 horas! (grátis)Dúvidas?
Compartilhe
Share orkut
delicious
Gostei
Nossa url encurtada:
Autor da matéria
Ramon Ferreira Silva

Formado em Sistemas de Informação, atualemnte trabalha como Arquiteto de Software em uma empresa de telefonia móvel.
Ramon Ferreira Silva
site
Últimas matérias
O que você procura para sua vida profissional?O que você procura para sua vida profissional?O planejamento agrega valorO planejamento agrega valorE-mail marketing em 140 caracteresE-mail marketing em 140 caracteres
Últimas notícias
Novos iPods, novo iOS, novo iTunes e nova Apple TVNovos iPods, novo iOS, novo iTunes e nova Apple TVConheça as 100 primeiras cidades atendidas pelo Banda Larga NacionalConheça as 100 primeiras cidades atendidas pelo Banda Larga ...Linus Torvalds diz que mercado já se rendeu ao LinuxLinus Torvalds diz que mercado já se rendeu ao Linux
Dicas do canal