Exemplo de Banco de Dados MySQL com AJAX no PHP

AJAX pode ser usado para comunicação interativa com o banco de dados.

Exemplo de banco de dados AJAX

Neste exemplo AJAX, vamos mostrar como uma página web usa AJAX para ler informações do banco de dados MySQL.

Selecione um cliente na lista suspensa


Aqui serão listadas as informações dos clientes.

Este aplicativo é composto por quatro elementos:

  • Banco de dados MySQL
  • Um formulário HTML simples
  • JavaScript
  • Página PHP

Banco de dados

O banco de dados que usaremos neste exemplo parece assim:

id ID do Cliente Nome da Empresa Nome do Contato Endereço Cidade Código Postal País
1 Alibaba Alibaba Group Ma Yun ...... Hangzhou 310002 China
2 APPLE Apple Inc. Tim Cook ...... Cupertino 95014 EUA
3 BAIDU BAIDU Inc. Li YanHong ...... Pequim 100080 China
4 Canon Canon USA Inc. Tsuneji Uchida ...... Nova York 11042 EUA

Explicação do exemplo

No exemplo acima, quando o usuário escolher um cliente na lista suspensa acima, a função chamada 'showUser()' será executada.

A função é acionada pelo evento onchange.

Este é o código HTML:

Exemplo

<!doctype html>
<html>
<head>
<script>
function showUser(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  } 
  if (window.XMLHttpRequest) {
    // código para IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // código para IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("txtHint").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","/demo/getcustomer.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Por favor, selecione um cliente:</option>
<option value="1">Alibaba</option>
<option value="2">APPLE</option>
<option value="3">BAIDU</option>
<option value="4">Canon</option>
<option value="5">Google</option>
<option value="6">HUAWEI</option>
<option value="7">Microsoft</option>
<option value="8">Nokia</option>
<option value="9">SONY</option>
<option value="10">Tencent</option>
</select>
</form>
<br>
<div id="txtHint"><b>As informações do cliente serão listadas aqui.</b></div>
</body>
</html>

Executar exemplo

Explicação do código:

Primeiro, verifique se um cliente foi selecionado. Se nenhum cliente foi selecionado (str == ""), limpe o conteúdo do txtHint e saia da função. Se um cliente foi selecionado, execute as seguintes ações:

  • Criar um objeto XMLHttpRequest
  • Criar uma função a ser executada quando o servidor estiver pronto para responder
  • Enviar a solicitação para o arquivo no servidor
  • Atenção, o parâmetro (q) é adicionado à URL (com conteúdo de lista suspensa)

Arquivo PHP

A página chamada "getuser.php" é um arquivo PHP que está no servidor.

O código-fonte de "getuser.php" realiza consultas no banco de dados MySQL e retorna os resultados em uma tabela HTML:

<?php
$q = intval($_GET['q']);
$con = mysqli_connect('MyServer','MyUser','MyPassword','Customers');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}
$sql="SELECT * FROM customerslist WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table>";
while($row = mysqli_fetch_array($result)) {
    echo "<tr><th>CustomerID</th><td>" . $row['CustomerID'] . "</td></tr>";
    echo "<tr><th>Nome da Empresa</th><td>" . $row['CompanyName'] . "</td></tr>";
    echo "<tr><th>Nome de Contato</th><td>" . $row['ContactName'] . "</td></tr>";
    echo "<tr><th>Endereço</th><td>" . $row['Address'] . "</td></tr>";
    echo "<tr><th>Cidade</th><td>" . $row['City'] . "</td></tr>";
    echo "<tr><th>Código Postal</th><td>" . $row['PostalCode'] . "</td></tr>";
    echo "<tr><th>País</th><td>" . $row['Country'] . "</td></tr>";
}
echo "</table>";
mysqli_close($con);
?>

Explicação: Quando uma consulta é enviada do JavaScript para o arquivo PHP, ocorre o seguinte:

  • PHP abre a conexão com o servidor MySQL
  • Encontrou o cliente correto
  • Crie uma tabela HTML, preencha os dados e envie de volta o marcador de posição "txtHint"