Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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?
Isso é perfeito! mas no caso eu não queria usar o select e sim um "botão" com o nome de cada estado, tem como adaptar esse script?
Como assim ?
Como nesse exemplo: http://chiptronic.com.br/testes/geomap/index.htm, porém queria que quando clicado em teste retornasse os valores do banco de daos.
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(){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.
?>
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>';$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>Eis o script:
[inline]
$(document).ready(function(){
var content = $('#content');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');success:function( response ){
$('#content').html(response);
}
});
});
});
Bom dia,
Acho que é isto que você quer - http://www.daviferreira.com/posts/populando-selects-de-cidades-e-estados-com-ajax-php-e-jquery