Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

andreia_sp

Um Exemplo Do Uso Do Ajax

Recommended Posts

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).

 

 

http://forum.imasters.com.br/public/style_emoticons/default/excl.gif Download dos arquivos

 

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>
   <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 
   xmlHttp.open("GET",url,true)
   xmlHttp.send(null)
   }
   
   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>

Estrutura do Banco de Dados

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)

Autoria: minha mesmo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Maravilha Andreia

Compartilhar este post


Link para o post
Compartilhar em outros sites

obrigada Guilherme, mas meu nome é Andreia rssss

Olá! Excelente script mesmo Andreia, mas gostaria de saber se você poderia disponibilizar essa base de dados em .SQL?

 

Pois todos meus sistemas estão em MySQL e quando tentei utilizar outras bases de dados para cidades/estados que encontrei na net, não funcionou, pois seu script está configurado para essa base de dados.

 

Teria como você disponibilizar pra download? Ou teria como alguém do fórum fazer essa conversão?

 

Obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites
Lucio veja o link que tem no inicio, de download. Tem a base em access com todos os estados e cidades. Acredito que o Mysql tenha ferramenta para exportar para la

Compartilhar este post


Link para o post
Compartilhar em outros sites

Pra fazer por POST tente assim neste trecho do seleciona_cidade.js:

 

xmlHttp.open("POST",url,true)
   xmlHttp.send(url)

Compartilhar este post


Link para o post
Compartilhar em outros sites

Nossa Andréia.. parece pesadelo isso Juroooooo

não consigo capturar... to tão perdida agora... como chegaria o nome dessa variável lá?

Assim né? <%=request("cidades")%>

não chega.... http://forum.imasters.com.br/public/style_emoticons/default/cry.gif

http://shopsul.tempsite.ws/agencia/produtos.asp

Se puder me ajudar mais uma vez... obrigada por tudo até agora...

Compartilhar este post


Link para o post
Compartilhar em outros sites

mas o seu codigo mostra o id da cidade selecionada, nao?

 

ontem eu vi mostrar o id hj jah nao...vo montar aki de novo o codigo e a noite (la da empresa o forum eh bloqueado) posto aki

Compartilhar este post


Link para o post
Compartilhar em outros sites

Mostra... mas qdo mando ele por post num chega na resposta entende? só chega o estado...

Tô mandando assim:

<form name="busca" method="post" action="produtos.asp" onSubmit="return valida_busca()">
						<input type="hidden" name="lang" value=<%=request("lang")%>>
		   <td width="10%">Marca:</td>
									<td width="30%">
										   <select name="estados" onChange="MandaID(this.value)">
											<option value="">Selecione</option>
											<% while not tab.eof %>
											<option value="<%= tab("codigo_categoria") %>"><%= tab("nome_categoria") %></option>
											<% tab.movenext
												 wend
											%>
											</select>
									</td>
								</tr>
								<tr>
									<td>Modelo:</td>
									<td><div id="exibe_cidade"><select><option value="">Selecione uma Marca</option></select></div></td>
									<%
								Dim Ano(29)
							
								Ano(1)="1981"
								Ano(2)="1982"	
								Ano(3)="1983"
								Ano(4)="1984" 	
								Ano(5)="1985"
								Ano(6)="1986" 	
								Ano(7)="1987"
								Ano(8)="1988" 	
								Ano(9)="1989"
								Ano(10)="1990" 	
								Ano(11)="1991"
								Ano(12)="1992" 	
								Ano(13)="1993"
								Ano(14)="1994" 	
								Ano(15)="1995"
								Ano(16)="1996" 	
								Ano(17)="1997"
								Ano(18)="1998" 	
								Ano(19)="1999"
								Ano(20)="2000" 	
								Ano(21)="2001"
								Ano(22)="2002" 	
								Ano(23)="2003"
								Ano(24)="2004" 	
								Ano(25)="2005"
								Ano(26)="2006" 	
								Ano(27)="2007"
								Ano(28)="2008" 	
								Ano(29)="2009"
								%>
								<tr> 
								
									<td colspan="2" style="padding-top:2px;padding-bottom:2px;padding-left:10px;padding-right:10px" class="MNlatesquerda">
									Ano/Modelo de:  
									
								<SELECT NAME="ano1" class="FORMbox">
								<OPTION SELECTED VALUE="1980">Todos</OPTION>
							<% 
							opcao = request("ano1")
								For I=1 to UBound(Ano)
									If opcao = Ano(i) Then	%>
										<OPTION SELECTED VALUE="<%= Ano(i) %>"><%= Ano(i) %></OPTION>		
									<% Else %>
										<OPTION VALUE="<%= Ano(i) %>"><%= Ano(i) %></OPTION>		
									<% End If
								Next 
							%>
								</SELECT>
									  
									à  
									<SELECT NAME="ano2" class="FORMbox">
									<OPTION SELECTED VALUE="2020">Todos</OPTION>
							<% 
							opcao = request("ano2")
								For I=1 to UBound(Ano)
									If opcao = Ano(i) Then	%>
										<OPTION SELECTED VALUE="<%= Ano(i) %>"><%= Ano(i) %></OPTION>		
									<% Else %>
										<OPTION VALUE="<%= Ano(i) %>"><%= Ano(i) %></OPTION>		
									<% End If
								Next 
							%>
								</SELECT>
									</td>
								</tr>
								<tr>  
						<td colspan="2">
							<table width="100%" border="0" cellspacing="0" cellpadding="0">
								<tr> 
								<%
								
								 Dim Valor(25)
	
								   Valor(1)="0000"   
									Valor(2)="4000"   
									Valor(3)="6000"
									Valor(4)="8000" 	
									Valor(5)="10000"
									Valor(6)="12000" 	
									Valor(7)="14000"
									Valor(8)="15000" 	
									Valor(9)="16000"
									Valor(10)="17000" 	
									Valor(11)="18000"
									Valor(12)="19000" 	
									Valor(13)="20000"
									Valor(14)="25000" 	
									Valor(15)="30000"
									Valor(16)="35000" 	
									Valor(17)="40000"
									Valor(18)="45000" 	
									Valor(19)="50000"
									Valor(20)="55000" 	
									Valor(21)="60000"
									Valor(22)="70000" 	
									Valor(23)="80000"
									Valor(24)="90000" 	
									Valor(25)="100000"
									
									%>
									<td style="padding-top:2px;padding-bottom:2px;padding-left:10px;padding-right:10px" class="MNlatesquerda">
									Preço de:  
									<SELECT NAME="preco1" class="FORMbox">
									<OPTION SELECTED VALUE="0000">Todos</OPTION>
									<% 
									opcao = request("preco1")
										For I=1 to UBound(Valor)
											If opcao = Valor(i) Then	%>
												<OPTION SELECTED VALUE="<%= Valor(i) %>"><%= Valor(i) %></OPTION>		
											<% Else %>
												<OPTION VALUE="<%= Valor(i) %>"><%= Valor(i) %></OPTION>		
											<% End If
										Next 
									%>
										</SELECT>
									à  
									<SELECT NAME="preco2" class="FORMbox">
									<OPTION SELECTED VALUE="1000000">Todos</OPTION>
									<% 
										opcao = request("preco2")
										For I=1 to UBound(Valor)
											If opcao = Valor(i) Then	%>
												<OPTION SELECTED VALUE="<%= Valor(i) %>"><%= Valor(i) %></OPTION>		
											<% Else %>
												<OPTION VALUE="<%= Valor(i) %>"><%= Valor(i) %></OPTION>		
											<% End If
										Next 
									%>
										</SELECT>
									</td>
								</tr>
								<tr>
									<td height="15" colspan="2"></td>
								</tr>
								<tr>
									<td align="center">
									<input name="Submit" type="submit" onClick="ExibeIds()" class="LCNlatesquerda" value="Buscar">
									
									
									</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			   			</td>
				</form>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Sim baixei a base em access e estou usando, funcionando corretamente, mas não consegui exportar corretamente para MySQL. Alguém já tentou exportar e conseguiu para disponibilizar aqui para download?

 

Obrigado e parabéns novamente pelo script! Muito útil mesmo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Qual o erro apresentado com MySQL?

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.