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

Ajax - Dúvidas


pcjardim

Pergunta

Estou estudando através de exemplos na intertne, estou usando exemplos de 2 combobox, aqueles que você seleciona o estado no 1º dai ele preenche o 2º com as cidades correspondentes, para dai tentar chegar onde quero. Quero que o primeiro fique como esta, porém não existiria o 2º os dados seriam preenchidos em tabela ou textfield, de preferência em textfield. Tenhos os seguintes arquivos:

index.php

<?
/*
----------------------------------------------------------------------
Arquivo .............: AJAX + PHP
Desenvolvido por ....: Júlio César Martini
Matéria .............: Artigo 127 - www.imasters.com.br
Criado em ..........: 14/03/2006
----------------------------------------------------------------------
*/

//CONECTA AO MYSQL
require_once("conecta.php");

//PEGA OS ESTADOS
$sql = "
SELECT a.id_estado, a.dsc_estado, a.sigl_estado
FROM estados a
ORDER BY a.dsc_estado";

//EXECUTA A QUERY
$sql = mysql_query($sql);

$row = mysql_num_rows($sql); ?>

&lt;script language="JavaScript">

function Dados(valor) {
//verifica se o browser tem suporte a ajax
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(ex) {
try {
ajax = new XMLHttpRequest();
}
catch(exc) {
alert("Esse browser não tem recursos para uso do Ajax");
ajax = null;
}
}
}
//se tiver suporte ajax
if(ajax) {
//deixa apenas o elemento 1 no option, os outros são excluídos
document.forms[0].listCidades.options.length = 1;

idOpcao = document.getElementById("opcoes");

ajax.open("POST", "cidades.php", true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

ajax.onreadystatechange = function() {
//enquanto estiver processando...emite a msg de carregando
if(ajax.readyState == 1) {
idOpcao.innerHTML = "Carregando...!";
}
//após ser processado - chama função processXML que vai varrer os dados
if(ajax.readyState == 4 ) {
if(ajax.responseXML) {
processXML(ajax.responseXML);
}
else {
//caso não seja um arquivo XML emite a mensagem abaixo
idOpcao.innerHTML = "--Primeiro selecione o estado--";
}
}
}
//passa o código do estado escolhido
var params = "estado="+valor;
ajax.send(params);
}
}

function processXML(obj){
//pega a tag cidade
var dataArray = obj.getElementsByTagName("cidade");

//total de elementos contidos na tag cidade
if(dataArray.length > 0) {
//percorre o arquivo XML paara extrair os dados
for(var i = 0 ; i < dataArray.length ; i++) {
var item = dataArray[i];
//contéudo dos campos no arquivo XML
var codigo = item.getElementsByTagName("codigo")[0].firstChild.nodeValue;
var descricao = item.getElementsByTagName("descricao")[0].firstChild.nodeValue;

idOpcao.innerHTML = "--Selecione uma das opções abaixo--";

//cria um novo option dinamicamente
var novo = document.createElement("option");
//atribui um ID a esse elemento
novo.setAttribute("id", "opcoes");
//atribui um valor
novo.value = codigo;
//atribui um texto
novo.text = descricao;
//finalmente adiciona o novo elemento
document.forms[0].listCidades.options.add(novo);
}
}
else {
//caso o XML volte vazio, printa a mensagem abaixo
idOpcao.innerHTML = "--Primeiro selecione o estado--";
}
}

</script>

<html>
<head>
<title>127º artigo PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF">
<h1>127º artigo: AJAX + PHP</h1>
Carregando cidades sem dar refresh na página.
<br><br>

<form name="frmAjax">
Estado: 
<select name="listEstados" onChange="Dados(this.value);">
<option value="0">--Selecione o estado >></option>
<? for($i=0; $i<$row; $i++) { ?>
<option value="<? echo mysql_result($sql, $i, "id_estado"); ?>">
<? echo mysql_result($sql, $i, "dsc_estado"); ?></option>
<? } ?>
</select>

<br><br>
Cidade: 
<select name="listCidades" onChange="alert(this.value);">
<option id="opcoes" value="0">--Primeiro selecione o estado--</option>
</select>
</form>
<?

$conexao = mysql_pconnect("localhost","root","paulo") or die($msg[0]);
mysql_select_db("imasters",$conexao) or die($msg[1]);

// Colocando o Início da tabela
?>
<table border="1"><tr>
<td><div align="center"><b>ID</b></div></td>
<td><div align="center"><b>Nome</b></div></td>
<td><div align="center"><b>Sigla</b></div></td>
</tr>
<?

// Fazendo uma consulta SQL e retornando os resultados em uma tabela HTML
$query = "SELECT id_estado,dsc_estado,sigl_estado FROM estados ORDER BY id_estado";
$resultado = mysql_query($query,$conexao);
while ($linha = mysql_fetch_array($resultado)) {
?>
<tr>
<td><? echo $linha['id_estado']; ?></td>
<td><? echo $linha['dsc_estado']; ?></td>
<td><? echo $linha['sigl_estado']; ?></td>
</tr>
<?
}
?>
</table>
</body>
</html>[/codebox]

conecta.php

[codebox]<?
/*
----------------------------------------------------------------------
Arquivo .............: AJAX + PHP
Desenvolvido por ....: Júlio César Martini
Matéria .............: Artigo 127 - www.imasters.com.br
Criado em ..........: 14/03/2006
----------------------------------------------------------------------
*/

//CONECTA AO MYSQL
$conn = mysql_connect("localhost", "root", "paulo")
or die("Erro na conexão com a base de dados");

//SELECIONA A BASE DE DADOS
$db = mysql_select_db("imasters", $conn)
or die("Erro na seleção da base de dados");
?>

cidades.php

<?
/******************************************************************
// ARQUIVO ...: Monta o XML das Cidades
// BY ........: Júlio César Martini
// DATA ......: 14/03/2006
/******************************************************************/

//CONECTA AO MYSQL
require_once("conecta.php");

//RECEBE PARÃMETRO
$pEstado = $_POST["estado"];

//QUERY
$sql = "
SELECT a.id_cidade, a.dsc_cidade
FROM cidades a
WHERE a.cod_estado = ".$pEstado."
ORDER BY a.dsc_cidade";

//EXECUTA A QUERY
$sql = mysql_query($sql);

$row = mysql_num_rows($sql);

//VERIFICA SE VOLTOU ALGO
if($row) {
//XML
$xml = "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>\n";
$xml .= "<cidades>\n";

//PERCORRE ARRAY
for($i=0; $i<$row; $i++) {
$codigo = mysql_result($sql, $i, "id_cidade");
$descricao = mysql_result($sql, $i, "dsc_cidade");
$xml .= "<cidade>\n";
$xml .= "<codigo>".$codigo."</codigo>\n";
$xml .= "<descricao>".$descricao."</descricao>\n";
$xml .= "</cidade>\n";
}//FECHA FOR

$xml.= "</cidades>\n";

//CABEÇALHO
Header("Content-type: application/xml; charset=iso-8859-1");
}//FECHA IF (row)

//PRINTA O RESULTADO
echo $xml;
?>
[/codebox]

Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

  • 0

Olha eu também to aprendendo ajax então não garanto que a forma que eu vou passar é a mais correta.

Bom, a logica que eu usei: O arquivo retorna um array para que você utilize cada posição em um campo. Eu fiz sem usar linguagem nenhuma pra simplificar a ideia, porem com linguagem não sei se ocorrerão problemas.

formulario.html

<html>
<head>
<script src="ajax.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="60%" cellspacing="0" cellpadding="5" bgcolor="#EAEBEF" bordercolorlight="#FFFFFF" bordercolordark="#E3E5EA">
	<tr>
		<td width="10%">Cep:</td>
		<td width="30%"><select name="estados" onchange="MandaID(this.value)">
				<option value=""></option>
				<option value="01020030">01020-030</option>
				</select>
		</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td><div id="dados" style="display: 'block'">
		Endereço: <input type="text" name="endereco"><br>
		Cidade: <input type="text" name="cidade"><br>
		Estado: <input type="text" name="estado"><br>
		</div></td>
	</tr>
</table>

</body>
</html>
ajax.js
var xmlHttp

function MandaID(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
    alert ("Este browser não suporta HTTP Request")
    return
}

var url="endereco.html"
url=url+"?id="+str
url=url+"&sidjs="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged()
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
var str = new String(xmlHttp.responseText);
str = str.split(","); 

document.getElementById("endereco").value = str[0];
document.getElementById("cidade").value = str[1];
document.getElementById("estado").value = str[2];
}
}

function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
    objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
    objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
endereco.html (arquivo onde faz a busca no banco)
rua x,são paulo,sp

nesse utlimo arquivo, eu escrevi só isso mesmo. Mas faça o loop na tabela com a separacao da virgula

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
      152,3k
    • Posts
      652,2k
×
×
  • Criar Novo...