Listando registro de banco de dados MySQL com AJAX, JSON e PHP

[ads2]
Olá pessoal, nesse post iremos aprender como listar os dados de uma tabela de banco de dados MySQL de forma assíncrona, ou seja, sem ter que atualizar a página inteira, usando de AJAX, JSON e PHP. Para isso precisaremos do WAMP Server instalado no seu computador e de um editor de texto de sua preferência, eu uso o Aptana Studio.

Passo 1:

Criaremos um banco de dados com o nome geek:

Passo 2:

Criaremos uma tabela no banco de dados com nome autores, com os campos id, nome e email:

Passo 3:

Iremos inserir três registros na tabela:

Passo 4:

Agora daremos início ao desenvolvimento das páginas, primeiro crie uma página chamada index.php

index.php

Observe que na linha 6 é feita a importação do biblioteca jQuery e na linha 7 importamos o arquivo Java Script em que faremos o tratamento dos dados.

Passo 5:

Agora faremos o arquivo ajax.js, onde faremos a conexão ajax e o tratamento dos dados:

Note que na linha 6 nós indicamos o arquivo que faremos a busca dos dados.

Passo 6:

Agora no arquivo getDados.php faremos a conexão com o banco de dados e a busca na tabela.

O resultado será assim:
da.fw
[ads1]

Sobre o autor:

Graduado em Análise e Desenvolvimento de Sistemas - FLS; Desenvolvedor Full-stack na UniLeão; Revisor de conteúdo do site Clube dos Geeks, católico, gosto de ler e escrever.

Postagens relacionadas:

21 respostas

    • Jayr Alencar

      Opa hujo, no ajax adicione a propriedade data recebendo seus parametros

      Ai no PHP você faz $_POST[‘id’];

      Responder
    • Jayr Alencar

      Você pode usar sockets, ou colocar um setInterval(function(){seu ajax},TEMPO_EM_MILESIMOS). A primeira opção é melhor. Se você puder usar Node.js melhor ainda.

      Responder
  1. Luis

    Olá,

    Tentei fazer tudo da forma como explica o artigo e deu me este erro na consola do browser:

    “Uncaught TypeError: Cannot read property ‘length’ of null”

    O que posso dazer?

    Responder
  2. Gabriel

    O código de acesso ao bando deve, obrigatoriamente, estar no getDados.php ou posso instanciar uma objeto DAO dentro getDados.php pra realizar o acesso ao banco?
    Minhas tentativas não deram certo =/

    Responder
  3. Gabriel

    Boa noite amigo
    Tenho interesse em trocar uma ideia com vc, me dê um alô no email ou no zap 48 99670907 Gabriel… Te aguardo

    Responder
  4. Vinícius Martins

    Prezado Jayr,

    Agradeço imensamente por disponibilizar esse maravilhoso material que me ajudou MUITO em meu projeto aqui na empresa, mas tenho uma dúvida sobre ele. Apenas uma mensagem de “success” aparece e pelo que tentei fazer, não consegui implementar com uma mensagem de “error”. Poderia me ajudar neste quesito?

    O que eu quero é que retorne uma mensagem caso não haja nenhum dado inserido na tabela ao invés de ficar em branco.

    Responder
  5. Lucas

    Fiz o exemplo exatamente como mostrado acima, ele gera o vetor com os dados na getDados.php, só que na index, só está aparecendo o cabeçalho da tabela, as informações não aparecem… Poderia me ajudar?

    Responder
  6. Matheus

    Boa tarde!

    Como ficaria o código em php em Node.js? Você conhece algum tutorial na internet sobre fazer isso com Node.js e o Postgresql?

    Obrigado!

    Responder

Deixe uma resposta

Seu e-mail não será publicado.