Ir para conteúdo

POWERED BY:

Arquivado

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

Odair Oliveira_163654

Consultas MySql com Ajax

Por , em Javascript

Recommended Posts

Odair Oliveira_163654    2

Odair Oliveira_163654
Postado

Bom dia!

Estou trabalhando em um projeto e estou com um pouco de dificuldades para fazer consultas MySql com Ajax.

O que quero fazer é o seguinte: Tenho uma lista com os estados brasileiros e quando o cliente clica em algum estado mostra as cidades desse estado, mas ao invés de carregar outra página quero exibir o conteúdo na mesma página com Ajax, alguém sabe como fazer isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

Entendi,
então, você tem que fazer assim +/-

 

 

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){
$("#button").click(function(){
// aqui você pega o estado que a pessoa selecionou
 
var data = $("#formulario").serialize();
$.post("consulta.php", data, function(resposta){
$("#retorno").html();
 
});
 
});
});
</script>
</head>
 
<body>
<form method="post" id="formulario">
<select name="uf">
<option selected="selected">Selecione um Estado</option>
<option value="SP">SP</option>
<option value="RJ">RJ</option>
<option value="TO">TO</option>
</select>
</form>
 
 
<div id="retorno"></div>
 
 
<input type="button" value="Clicar" id="button" />
 
</body>
</html>
 
 
 
 
 
PHP - consulta.php
<?php
 
 
$uf = $_POST['uf'];
 
$query = mysql_query("SELECT * FROM suaTabela WHERE uf='$uf'");
 
//Ai aqui você faz um mysql_fetch_array dentro de um while para ir pegando os dados.
 
 ?>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Odair Oliveira_163654    2

Odair Oliveira_163654
Postado

Encontrei um script que resolveu meu problema:

Eis meu html:

[inline]

<body>
<header>
<h1>Geomapeamento de clientes</h1>
</header>
<?php
echo '<nav><ul>';
echo '<h3>Selecione um estado</h3>';
// Consulta para pegar os dados da categoria:
$sql = "SELECT * FROM estados ORDER BY id_estados asc";
$resultado=mysql_query($sql); ?>
<?php while($mostrar=mysql_fetch_array($resultado)) { ?>
<li><a class="estados transicao" href="estado.php?id_estados=<?php echo $mostrar['id_estados']; ?>" title="<?php echo $mostrar['nome']; ?>"><?php echo $mostrar['uf']; ?></a></li>
<?php
}
echo '</ul></nav>';
?>
<div id="content"></div>
</body>
[/inline]
Eis o script:


[inline]

$(document).ready(function(){
var content = $('#content');
//pre carregando o gif
loading = new Image(); loading.src = 'img/load.gif';
$('.estados').live('click', function( e ){
e.preventDefault();
content.html( '<img id="load" src="img/load.gif" alt="carregando" />' );
var href = $( this ).attr('href');
$.ajax({
url: href,
success:function( response ){
$('#content').html(response);
}
});
});
});

[/inline]

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito