Carregando dados do Banco de Dados MySQL através de uma tag

Propaganda

Carregando dados do Banco de
Dados MySQL através de uma
tag SELECT
Como
já
vimos
todo
o
processo
de
criação
do
Objeto
XMLHttpRequest e como efetuar a comunicação com o servidor
através das funções de OPEN e SEND em outros posts meu, vamos
agora botar um exemplo de funcionamento do AJAX, onde ele irá
carregar os valores do banco de dados MysqL de acordo com o
que for selecionado no <SELECT> e exibir esses dados em uma
div. Funcionamento:
1. Criar o BD e inserir os valores
2. Fazer a listagem dentro da tag <SELECT>
3. Ao selecionar um elemento, exibir os dados dele em uma
<DIV>
Não entrarei em detalhes aqui das páginas PHP, pois não é o
nosso foco, mas eu fiz o código o mais simples possível para o
funcionamento. A idéia será tipo uma “Agenda de Contatos”.
Iremos trabalhar com 3 arquivos:
1. usuarios.php
2. exibir_dados.php
3. scripts.js
Começaremos com o arquivo “usuarios.php“, que é onde eu irei
efetuar a conexão com o BD e listar os nomes das pessoas que
tenho cadastrado lá. Segue abaixo o código do arquivo:
<?php
header("Content-Type: text/html; charset=ISO-8859-1");
?>
<!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"
charset=iso-8859-1" />
<script
language="javascript"
type="text/javascript"></script>
<title>Seleção de Usuários</title>
<style type="text/css">
#conteudo{
width:300px;
height:100px;
background-color:#CCC;
}
</style>
</head>
content="text/html;
src="scripts.js"
<body>
<?php
mysql_connect("localhost", "usuario", "senha");
mysql_select_db("meu_bd");
$consulta = mysql_query("SELECT * FROM `agenda` ORDER BY
`nome`;");
$num = mysql_num_rows($consulta);
$usuario = mysql_fetch_assoc($consulta);
if($num > 0){
echo "<form>\n";
echo "Selecione um usuário:<br /> \n";
echo
"<select
name=\"usuarios\"
onchange=\"mostrarUsuario(this.value);\">\n";
echo "<option value=\"0\" selected=\"selected\">Selecione o
nome</option>\n";
do{
echo
"<option
value=\"{$usuario['id_usuario']}\">{$usuario['nome']}</optio
n>\n";
}while($usuario = mysql_fetch_assoc($consulta));
echo "</select>\n";
echo "</form>\n<br /><br />";
}
?>
<div id="conteudo"><b>Os dados irão aparecer aqui.</b></div>
</body>
</html>
Agora vamos ao arquivo “exibir_dados.php“:
<?php
header("Content-Type: text/html; charset=ISO-8859-1");
$id=$_GET["id"];
if($id==0){
echo "Você deve selecionar um NOME";
}else{
include("conexao.php");
$sql="SELECT
'".$id."'";
*
FROM
`agenda`
WHERE
`id_usuario`
=
$result = mysql_query($sql);
echo "<table border='1'>
<tr>
<th>Nome</th>
<th>Telefone</th>
<th>E-mail</th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['nome'] . "</td>";
echo "<td>" . $row['telefone'] . "</td>";
echo "<td>" . $row['email'] . "</td>";
echo "</tr>";
}
echo "</table>";
}
?>
E pra finalizar nosso arquivo Javascript chamado “scripts.js”
que fará o processo do AJAX:
var navegador = navigator.userAgent.toLowerCase(); //Cria e
atribui à variável global 'navegador' (em caracteres
minúsculos) o nome e a versão do navegador
//Função que inicia o objeto XMLHttpRequest
function objetoXML(){
if (navegador.indexOf('msie') != -1) { //Internet Explorer
var controle = (navegador.indexOf('msie 5') != -1) ?
'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP'; //Operador ternário
que adiciona o objeto padrão do seu navegador (caso for o
IE) à variável 'controle'
try{
return xmlhttp = new ActiveXObject(controle); //Inicia o
objeto no IE
}catch(e){}
}else{ //Firefox, Safari, Outros..
return xmlhttp = new XMLHttpRequest(); //Inicia o objeto no
Firefox, Safari, Mozilla
}
}
// Exibe os dados do usuário pelo ID que foi passado como
parâmetro
function mostrarUsuario(id) {
xmlhttp=objetoXML();
if (xmlhttp==null) {
alert ("Seu navegador não suporta AJAX!");
return;
}
var url="exibir_dados.php";
url=url+"?id="+id;
xmlhttp.onreadystatechange=function() {
if
(xmlhttp.readyState==4
||
xmlhttp.readyState=="complete") {
document.getElementById('conteudo').innerHTML=xmlhttp.respon
seText;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
Agora veja alguns detalhes
“mostrarUsuario();”:
de
cada
linha
da
função
17– Cria o Objeto XMLHttpRequest na variável “xmlhttp”;
18– Testa para ver se não foi criado o Objeto para exibir a
mensagem de erro;
23– Definimos o nome de nossa página que receberá a consulta;
24– Completamos com os dados que serão enviados pelo GET;
25– A partir daqui até a linha 28, iremos verificar o estado
em que se encontra para poder dar o innerHTML na div
“conteudo”;
30– Abrimos o devido documento com os dados;
31– Enviamos a consulta.
Caso você queira fazer alterações de onde será exibido o
resultado, basta alterar o nome do elemento na linha 27.
Caso queira alterar o nome do arquivo que receberá a consulta,
basta modificar o valor onde tem a variável “url” na linha 23
para o nome do seu arquivo.
Espero que tenham gostado e aprendido um pouco mais de AJAX.
Qualquer coisa, só comentar. Ah, e não esqueçam de dar o seu
voto neste post!
Abraços!