Aprenda a buscar dados do MySQL sem recarregar a página com AJAX e PHP

Como usar AJAX para buscar dados do MySQL sem recarregar a página no PHP?

O uso de AJAX permite carregar informações de um banco de dados sem recarregar a página, tornando a experiência do usuário mais fluida e interativa. Aqui, criaremos um exemplo prático para buscar dados do MySQL via AJAX e exibi-los dinamicamente.

Criando o Banco de Dados

Antes de implementar a busca, criamos uma tabela de usuários:

CREATE TABLE usuarios (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nome VARCHAR(100) NOT NULL,
    email VARCHAR(100) UNIQUE NOT NULL
);

Criando a Página HTML com AJAX

Criamos um campo de pesquisa para buscar usuários sem precisar atualizar a página:

<input type="text" id="pesquisa" placeholder="Buscar usuário">
<div id="resultado"></div>

<script>
document.getElementById('pesquisa').addEventListener('keyup', function() {
    var termo = this.value;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "buscar.php?termo=" + termo, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            document.getElementById("resultado").innerHTML = xhr.responseText;
        }
    };
    xhr.send();
});
</script>

Aqui:

• Capturamos a entrada do usuário e disparamos uma requisição AJAX via XMLHttpRequest.
• O script envia o termo de busca para buscar.php e atualiza o conteúdo do <div> com os resultados.

Criando o Script PHP (buscar.php)

Criamos o arquivo que consulta o MySQL e retorna os resultados:

<?php
$conexao = new PDO("mysql:host=localhost;dbname=meu_banco", "usuario", "senha");
$termo = '%'.$_GET['termo'].'%';
$sql = "SELECT * FROM usuarios WHERE nome LIKE :termo";
$stmt = $conexao->prepare($sql);
$stmt->bindParam(':termo', $termo);
$stmt->execute();
while ($linha = $stmt->fetch(PDO::FETCH_ASSOC)) {
    echo "<p>" . $linha["nome"] . " - " . $linha["email"] . "</p>";
}
?>

Aqui:

• O código recebe o termo de busca e consulta o banco usando LIKE.
• Os resultados são retornados e exibidos dinamicamente via AJAX.

Por que usar AJAX para buscar dados no MySQL com PHP?

O uso de AJAX para buscar dados no MySQL melhora significativamente a experiência do usuário, permitindo interações dinâmicas sem recarregamento da página. Essa técnica é amplamente utilizada em sistemas modernos, como autocompletar de pesquisa, filtros dinâmicos e carregamento de conteúdo sob demanda.

Algumas aplicações:

• Autocompletar de pesquisas
• Carregamento dinâmico de listas de usuários
• Filtros de produtos em lojas virtuais
• Atualização de conteúdos sem recarregar a página

Dicas para quem está começando

• Utilize XMLHttpRequest ou fetch() para fazer requisições AJAX.
• Prefira usar prepared statements para evitar SQL Injection.
• Evite fazer requisições a cada tecla digitada, use um delay para otimizar buscas.
• Melhore a interface com CSS para exibir resultados de forma organizada.
• Teste sua aplicação em diferentes navegadores para garantir compatibilidade.

Compartilhe este tutorial