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
Agora criaremos um arquivo JavaScript.
Arquivo : times.js
e por fim o script PHP que receberá a soloitação
Esse é exemplo bem simplório, mas você poderia estar buscando os dados em Banco ou outro repositório.
Até a próxima.
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.
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]
Artigo anterior
Trabalhando com JSON
A JSON é um formato de dados compacto,. Próximo artigo
Exibindo Hints com AJAX
É comum ver em aplicações Desktop, ele.
Trabalhando com JSON
A JSON é um formato de dados compacto,. Próximo artigo
Exibindo Hints com AJAX
É comum ver em aplicações Desktop, ele.
Compartilhe:
Comentários:
Preencha o formulário para comentar:
Publicado em:
01/07/2008 - 10:43 Jesus
Tirando os erros de português, a matéria está boa.
