Oficina da Net

Subscreva nosso RSS - Assine o RSS e receba as novidades do site em seu leitor.

Preenchendo uma ComboBox Ajax e Json

Publicado em: 29/06/2007 | Ajax | Visualizações: 7.065 | 1 Comentário(s)

  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.

compartilhe
Dica: Confira todo nosso conteúdo de Ajax no site.

Links patrocinados

Últimos artigos do editor

Resolvendo o problema do .
Muitas das vezes quando para.

Exibindo Hints com AJAX
É comum ver em aplicações De.

Caminhando pelo DOM - Par.
Bem amigos, peço desculpas a.

Caminhando pelo DOM - Par.
Chegamos a parte final de no.

Caminhando pelo DOM - Par.
Cuntinuamos a nossa cmainha .

Caminhando pelo DOM - Par.
O Document Object Model é a .

> clique aqui para comentar
Opinião do leitor:

1 Comentário(s)

Jesus comentou:

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

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

Acesso restrito

Destaques

Como assinar um RSS
Aprenda a assinar um blog/site utilizando o agregador de notícias em formato RSS

Peixe Grande 2008
O Oficina da Net está este ano participando do Projeto Peixe Grande 2008 na categoria de Blog. Ajude-nos vote!

iPhone 3G no Brasil
O smartphone da Apple chegou ao Brasil com a tecnologia de terceira geração de telefonia.

Links patrocinados

Autor

Ramon Ferreira Silva
Site do colunista

Artigos Relacionados

Resolvendo o problema do Cache
Exibindo Hints com AJAX
Trabalhando com JSON
Acentuação para conteúdos carreg.

Novos Artigos

Identidade Visual: A criação de .
A falta de estrutura dos sites
Curso de Visual Basic - Aula 5 -.
Curso de Delphi - Aula 2: O ambi.

Notícias Relacionados

Plataforma OpenSocial tem evento.

Assine nosso RSS

Assine por e-mail