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" content="text/html; charset=iso-8859-1" />
<script language="javascript" src="scripts.js" 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>

<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']}</option>\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 * FROM `agenda` WHERE `id_usuario` = '".$id."'";

 $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.responseText;
 }
 }
 xmlhttp.open("GET",url,true);
 xmlhttp.send(null);
}

Agora veja alguns detalhes de cada linha da função “mostrarUsuario();”:

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! 🙂

Sou bacharel em Sistemas de Informação pela Estácio de Sá (Alagoas), especialista em Gestão Estratégica da Tecnologia da Informação pela Univ. Gama Filho (UGF) e pós-graduando em Gestão da Segurança da Informação pela Univ. do Sul de Santa Catarina (UNISUL). Certificações que possuo: CompTIA Security+, EXIN EHF, MCSO, MCRM, ITIL v3. Tenho interesse por todas as áreas da informática, mas em especial em Gestão e Governança de TI, Segurança da Informação, Ethical Hacking e Perícia Forense.

5 Responses to “Carregando dados do Banco de Dados MySQL através de uma tag SELECT”

  1. Célio Augusto disse:

    pois é, vou ter que estudar um pouco mais de ajax, ja ta na hora hehe

  2. Célio Augusto disse:

    Boa intenção, mas não funciona não, bem eu não entendo de ajax, mas fiz todas as auteraçoes no php e nada, apenas carrega o select

    • Diego Macêdo disse:

      Dá uma lida nas minhas postagens sobre AJAX, assim fica mais fácil pra vc entender tudo e adaptar pra o que vc quiser. Pode ser que vc esteja deixando passar algum detalhe para deixar exatamente como vc quer. =)

  3. adailton disse:

    como faiz para colocar uma div para cada conteudo? tipo nome em uma div e compra em outra div e imagem em outra div tambem queria saber como faiz para posicionala na tela, é que eu to montando uma loja que ao clicar no objeto carrega na div do carrinho o objeto ai ele vai adicionando e armazenando no bd para que depois eu saiba oque foi comprado.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Quer ficar atualizado?

Inscreva-se em minha newsletter e seja notificado quando eu publicar novos artigos de graça!