+7
Ajax e PHP - Carregando dados sem refresh
Após criado o banco de dados e as tabelas populadas, crie um arquivo form.php. Logo no começo vamos fazer o controle de cache com o código abaixo.
Ao chamarmos a função JavaScript list_dados() no "onchange" do campo "categoria", ela irá chamar a página result.php?id=parametro , porém essa página não será mostrada para o usuário, somente processada onde retornaremos o valor pretendido. Ao concluir chamaremos a função handleHttpResponse. Que é a responsavel por monstar nosso listmenu de resposta e popular a segunda combo (SUBCATEGORIA).
O campo chamado "subcategoria" será populada após ser selecionado os valores na primeira combo (chamada "categoria").
<?php
header("Content-Type: text/html; charset=iso-8859-1");
// Faz o controle de cache.
$gmtDate = gmdate("D, d M Y H:i:s");
header("Expires: {$gmtDate} GMT");
header("Last-Modified: {$gmtDate} GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
// Aqui criamos a conexão com o banco de dados.
$con = mysql_connect("host", "user", "senha");
mysql_select_db("teste");
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
function list_dados(valor)
{
// Passando os dados para a página result.php através do método GET.
http.open("GET", "result.php?id=" + valor, true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
function handleHttpResponse()
{
campo_select = document.forms[0].subcategoria;
if (http.readyState == 4) {
campo_select.options.length = 0;
results = http.responseText.split(",");
for (var i = 0; i < results.length; i++) {
string = results[i].split("|");
campo_select.options[i] = new Option(string[0], string[1]);
}
}
}
// Essa função é somente para identificar o Navegador e suporte ao XMLHttpRequest.
function getHTTPObject()
{
var req;
try {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
if (req.readyState == null) {
req.readyState = 1;
req.addEventListener("load", function() {
req.readyState = 4;
if (typeof req.onReadyStateChange == "function") {
req.onReadyStateChange();
}
}, false);
}
return req;
}
if (window.ActiveXObject) {
var prefixes = ["MSXML2", "Microsoft", "MSXML", "MSXML3"];
for (var i = 0; i < prefixes.length; i++) {
try {
req = new ActiveXObject(prefixes[i] + ".XmlHttp");
return req;
} catch (ex) {};
}
}
} catch (ex) {}
alert("XmlHttp Objects not supported by client browser");
}
var http = getHTTPObject();
// Logo após fazer a verificação, é chamada a função e passada
// o valor à variável global http.
</script>
</head>
<body>
<form name="formulario" method="post" action="">
<select name="categoria" onchange="javascript:list_dados(this.value);">
<option></option>
<?php
/* SQL que busca os artigos do banco de dados e monta o select */
$consulta = mysql_query("SELECT * FROM tbl_categorias ORDER BY nome ASC");
while ($row = mysql_fetch_assoc($consulta)) {
echo "<option value=\"{$row['codigo']}\">{$row['nome']}</option>\n";
}
?>
</select>
</p>
<p>
<select name="subcategoria"></select>
</p>
</form>
</body>
</html>
Ao chamarmos a função JavaScript list_dados() no "onchange" do campo "categoria", ela irá chamar a página result.php?id=parametro , porém essa página não será mostrada para o usuário, somente processada onde retornaremos o valor pretendido. Ao concluir chamaremos a função handleHttpResponse. Que é a responsavel por monstar nosso listmenu de resposta e popular a segunda combo (SUBCATEGORIA).
O campo chamado "subcategoria" será populada após ser selecionado os valores na primeira combo (chamada "categoria").
Comentários:
Mostrando 1 - 9 de 9 comentários
a primeira parte eu segui como seu exemplo mostra
17/06/2011 2:43pm
(~14 anos atrás)
como eu faço para colcoar mais campos no caso estou fazendo um buscador de pneus... segue o link www.tkpneus.com.br/index1.php
17/06/2011 2:42pm
(~14 anos atrás)
Rogério,
Você teria que colocar os dados na SESSÃO, ou colocar algum marcador assim como o google faz http://url.com/pagina.php?teste=a#marcador.
Você teria que colocar os dados na SESSÃO, ou colocar algum marcador assim como o google faz http://url.com/pagina.php?teste=a#marcador.
30/11/2009 3:06pm
(~15 anos atrás)
Existe alguma maneira de o botão "Anterior" do browser funcionar com ajax?
30/11/2009 3:00pm
(~15 anos atrás)
como criar sistema de comentario sem refresh para enviar sem refresh para receber os dados do BD
24/08/2009 7:59pm
(~15 anos atrás)
codigo perfeito nada a reclamar facil em tudo bem didatico.
Continue assim...
Continue assim...
23/07/2009 7:46pm
(~15 anos atrás)
Olá ...
Cara magnifico esse artigo ...
Só uma Duvida que me ocorreu ...
E a conexão do Banco quando é fechada ?
Cara magnifico esse artigo ...
Só uma Duvida que me ocorreu ...
E a conexão do Banco quando é fechada ?
04/06/2009 3:37pm
(~16 anos atrás)
O artigo esta ótimo, porém os códigos estão cheio de comentários que acaba atrapalhando a leitura do mesmo. Procure, falar do código no texto do artigo ao invés de encher de comentários. Abração!
01/06/2009 2:20pm
(~16 anos atrás)