Shefarol Soluções Web

AJAX e MySQL - Voltar

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

Exemplo de banco de dados AJAX

O exemplo a seguir demonstrará como uma página da Web pode buscar informações de um banco de dados com AJAX:

Referência: https://www.w3schools.com/php/php_ajax_database.asp

As informações da pessoa serão listadas abaixo:

 

Explicação do código:

No exemplo acima, quando um usuário seleciona uma pessoa na lista suspensa, uma função chamada "showUser()" é executada.

A função é acionada pelo evento onchange.

Código em HTML
<html>
<head>
<script>
function showUser(str) {
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  } else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("txtHint").innerHTML = this.responseText;
      }
    };
    xmlhttp.open("GET","getuser.php?q="+str,true);
    xmlhttp.send();
  }
}
</script>
</head>
<body>

<form>
<select name="users" onchange="showUser(this.value)">
  <option value="">Selecione uma pessoa:</option>
  <option value="1">João</option>
  <option value="2">Maria</option>
  <option value="3">Simone</option>
  <option value="4">Tereza</option>
  </select>
</form>
<br>
<div id="txtHint"><b>As informações da pessoa serão listadas aqui...</b></div>

</body>
</html>

 

Explicação do código:

Primeiro, verifica se uma pessoa foi selecionada. Se nenhuma pessoa for selecionada (str == ""), limpa o conteúdo de txtHint e sai da função. Se uma pessoa for selecionada, faz o seguinte:

O Arquivo PHP

A página no servidor chamada pelo JavaScript acima é um arquivo PHP chamado "getuser.php".

O código-fonte em "getuser.php" executa uma consulta em um banco de dados MySQL e retorna o resultado em uma tabela HTML:

Código em PHP
<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<?php
		$q = intval($_GET['q']);

		$con = mysqli_connect('localhost','usuario','senha');
		if (!$con) {
		  die('Erro de conexão: ' . mysqli_error($con));
		}

		mysqli_select_db($con,"bd_ajax");
		$sql = "SELECT * FROM user WHERE id = '".$q."'";
		$result = mysqli_query($con, $sql);

		echo "<table>
		<tr>
			<th>Nome</th>
			<th>Sobrenome</th>
			<th>Idade</th>
			<th>Cidade</th>
			<th>Profissão</th>
		</tr>";
		while($row = mysqli_fetch_array($result)) {
		  echo "<tr>";
			  echo "<td>" . $row['nome'] . "</td>";
			  echo "<td>" . $row['sobrenome'] . "</td>";
			  echo "<td>" . $row['idade'] . "</td>";
			  echo "<td>" . $row['cidade'] . "</td>";
			  echo "<td>" . $row['profissao'] . "</td>";
		  echo "</tr>";
		}
		echo "</table>";
		mysqli_close($con);
	?>
</body>
</html>

 

Explicação:

Quando a consulta é enviada do JavaScript para o arquivo PHP, acontece o seguinte:

  1. PHP abre uma conexão com um servidor MySQL
  2. A pessoa certa foi encontrada
  3. Uma tabela HTML é criada, preenchida com dados e enviada de volta para o espaço reservado "txtHint"