Ir para conteúdo
Fórum Script Brasil
  • 0

Um Exemplo Do Uso Do Ajax


.Andreia.

Pergunta

Combos de estados e cidades usando Ajax

Funcionamento: O combo de estados é carregado ao abrir a pagina, ao selecionar um estado o combo de cidades é carregado automaticamente com as cidades referente ao estado selecionado.

São 3 arquivos: o inicial (.asp), include (.js) e o arquivo de retorno do segundo combo (.asp)

O arquivo conexao.asp é uma função que conecta ao banco de dados (access).

-> Testado no IE 7/8 e FF 3

Download dos arquivos em: http://scriptbrasil.com.br/download/codigo/6824/

conexao.asp

<%
dim conexao
sub abre_conexao
Set Conexao = Server.CreateObject("ADODB.Connection")
Conexao.Open "DBQ=CAMINHO_DA_PASTA\NOME_DO_BANCO.mdb;Driver={Microsoft Access Driver (*.mdb)}"
end sub
sub fecha_conexao
     Conexao.close
     Set Conexao = nothing
end sub 
%>
ajax_combo.asp
<!--#include file="conexao.asp"-->
<%
call abre_conexao

sql = "select id_estado, estado from estados order by estado"
set tab = conexao.execute(sql)
%>
<html>
<head>
&lt;script src="seleciona_cidade.js"></script>
</head>
<title>Exemplo de Ajax</title>

<style type="text/css">
table
{
font-family: verdana;
font-size: 11px;
color: #000099;
font-weight: bold;
}

select
{
font-family: verdana;
font-size: 11px;
}
</style>

<body>

<table border="1" width="40%" cellspacing="0" cellpadding="5" bgcolor="#EAEBEF" bordercolorlight="#FFFFFF" bordercolordark="#E3E5EA">
    <tr>
        <td width="10%">Estado:</td>
        <td width="30%"><select name="estados" onchange="MandaID(this.value)">
                <option value="">Selecione</option>
                <% while not tab.eof %>
                <option value="<%= tab("id_estado") %>"><%= tab("estado") %></option>
                <% tab.movenext
                     wend
                %>
                </select>
        </td>
    </tr>
    <tr>
        <td>Cidade:</td>
        <td><div id="exibe_cidade"><select><option value="">Selecione um estado</option></select></div></td>
    </tr>
</table>

<%
call fecha_conexao
set tab = nothing
%>

</body>
</html>
seleciona_cidade.js
var xmlHttp function MandaID(str) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Este browser não suporta HTTP Request") return } var url="seleciona_cidade.asp" url=url+"?id_estado="+str url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChanged //ENVIO POR GET xmlHttp.open("GET",url,true) xmlHttp.send(null) //ENVIO POR POST //xmlHttp.open("POST",url,true) //xmlHttp.send(url) } function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("exibe_cidade").innerHTML=xmlHttp.responseText } } function GetXmlHttpObject() { var objXMLHttp=null if (window.XMLHttpRequest) { objXMLHttp=new XMLHttpRequest() } else if (window.ActiveXObject) { objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP") } return objXMLHttp }
seleciona_cidade.asp
<!--#include file="conexao.asp"-->

<% 
Response.Charset = "ISO-8859-1"
id_estado = request.querystring("id_estado") 
%>

<select name="cidades">
<% if id_estado = "" then %>
    <option value="">Selecione um estado</option>
<% else

      call abre_conexao
        
     sql_cidade="SELECT id_cidade, cidade FROM CIDADES WHERE id_estado="& id_estado
     set tab_cidade = conexao.execute(sql_cidade)
     while not tab_cidade.eof 
%>
        <option value="<%= tab_cidade("id_cidade") %>"><%= tab_cidade("cidade") %></option>

<% tab_cidade.movenext
     wend

     call fecha_conexao
     set tab_cidade = nothing

     end if
%>
</select>

[editando]Algumas pessoas tem me perguntado como fazer com o POST, então editei o codigo seleciona_cidade.js com as duas opcoes (destaque em azul). Testei aqui e funcionou mas caso alguém tenha problema é só avisar[/editando]

Editado por .Andreia.
Link para o comentário
Compartilhar em outros sites

17 respostass a esta questão

Posts Recomendados

  • 0

já editei o post colocando o arquivo conexao.asp. Atente que tem você tem que alterar o codigo colocando o nome do BD e o caminho da pasta de onde ele estiver em sua maquina.

Crie um BD no Access com a seguinte estrutura:

Nome da tabela1: Cidades

Nome do campo1: id_cidade (auto-numerico)

Nome do campo2: id_estado (número)

Nome do campo3: cidade (texto)

Nome da tabela2: Estados

Nome do campo1: id_estado (auto-numerico)

Nome do campo2: estado (texto)

Depois você precisa inserir valores neles, ou seja, jogar as cidades e os estados.

qualquer duvida estamos aí ;)

Link para o comentário
Compartilhar em outros sites

  • 0
Guest Davi S. Dourado
Agora foi certinho, muito obrigado....

Dias atras, vi a sua página, e fiz o exemplo. Naturalmente que fiz a conexão (da forma que conheço) e funcionou.

Achei muito legal, e pra ter dizer a verdade, já fiz vários exemplos, mas esse foi o único que funcionou direitinho. Parabéns.

Por outro lado, como ainda não tinha o código da Conexao tempos atráz, fiquei pensando: O que será que tem naquele "Call Abre_conexao" e "call Fecha_conexao", e fiquei imaginando mil formas de abrir a conexão sem ter que mostrar no proprio fonte em ASP e mesmo em arquivos include (é a forma que consegui fazer em minhas aplicações até Hoje.

Atualmente estou com um exemplo em Java onde utilizo um applet. Não está 100 por cento, pois só consigo testá-lo no appeltviwer. No browse não funciona. Acredito que seja por motivo do CLASSPATH, o que já configurei, deve estar certo, mas não encontra a classe, apesar de estar lá, tudo certingo.....

alguém tem algo a dizer sobre o CLASSPATCH do Oracle

Link para o comentário
Compartilhar em outros sites

  • 0

oi andreia_sp, parabens pelo seu codigo funcionou muito bem aqui, porem eu gostaria de pedir a sua ajuda..

gostaria de aplicar esse script para mais que 2 combos... no total seria 5 combos lendo apenas uma tabela com 5 colunas. Uma coluna dependendo da seleção da outra.

já tentei usar o seu codigo aqui postado, porém meu conhecimento não esta ajudando... gostaria muito que me ajudasse ..

eu tenho um script mas ele faz refresh na pagina e isso está atrapalhando, fora que é muito ruim o refresh na pagina.

por exemplo o ultimo select seria assim:

select coluna5

from tabela

where coluna1 = A

and coluna2 = B

and coluna3 = C

and coluna4 = D

group by coluna5

Link para o comentário
Compartilhar em outros sites

  • 0

OI Andreia_sp

Tudo funcionou muito bem.

Só tem um detalhe. Tento recuperar o valor do SELECT cidades e retorna vazio. Tento dar um cidades.focus() e diz que está invisível ou desabilitado...

E por conta disso, não estou conseguindo processar o formuário corretamento.

Saberia como resolver??

Obrigado!

Link para o comentário
Compartilhar em outros sites

  • 0

Muito otimo este combos seu andreia mais estou com um problema eu estou usando 3 tabelas uma chama depto, e as outras são suas tabelas de CIDADE e ESTADO estou conseguindo inserir o codigo tanto da cidade como do estdo dentro desta tabela depto, mais queria mostra na pagina eles não como codigo e sim pelo nome da cidade e pela sigla, teria como fazer?como?

Agradeço desde já atenção

Esta de parabens pelo combo foi o unico que consegui fazer funcionar

Link para o comentário
Compartilhar em outros sites

  • 0

Opa valeu Kleber :)

então, você quer colocar 3 combos ligados entre si ou você quer substituir em vez de ESTADO -> CIDADE para CIDADE -> SIGLA ??

Essa sigla seria do estado ne? Bom, se for isso, o que você tem que ter é a ID da cidade selecionada sendo passada para o ajax ir lá na pagina de pesquisa e filtrar só as siglas com aquele ID..

Link para o comentário
Compartilhar em outros sites

  • 0
Guest Diego Lazzari

Cara muito interessante esse tutorial resolveu ate metade do meu problema. Converti esse codigo para php e funcionou perfeitamente o problema que insiste em persistir é o navegador

Utilizo rotinas em php + ajax + xml que rodam perfeitamente no IE, instalei o google chrome e notei que nele essas rotinas não rodavam, o mesmo acontecia com o Firefox, essa solução acima funcionou no Google Chrome mais no Firefox continua com problema não sei se fiz algo errado ou realmente essa rotina não funciona no FIREFOX

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,7k
×
×
  • Criar Novo...