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:

CREATE DATABASE `geek` ;

Passo 2:

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

CREATE TABLE `geek`.`autores` (
`id` INT NOT NULL AUTO_INCREMENT ,
`nome` TEXT NOT NULL ,
`email` TEXT NOT NULL ,
PRIMARY KEY ( `id` )
) ENGINE = InnoDB;

Passo 3:

Iremos inserir três registros na tabela:

INSERT INTO `geek`.`autores` (
`nome` ,
`email`
)
VALUES (
 'Jayr', 'jayr@clubedosgeeks.com.br'
), (
 'Elias', 'elias@clubedosgeeks.com.br'
),(
 'Champs', 'champs@clubedosgeeks.com.br'
);

Passo 4:

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

index.php


	
		
		AJAX, JSON E PHP
        	
        	
	
	
		
ID Nome E-mail

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:

$(document).ready(function(){
	$('#tabela').empty(); //Limpando a tabela
	$.ajax({
		type:'post',		//Definimos o método HTTP usado
		dataType: 'json',	//Definimos o tipo de retorno
		url: 'getDados.php',//Definindo o arquivo onde serão buscados os dados
		success: function(dados){
			for(var i=0;dados.length>i;i++){
				//Adicionando registros retornados na tabela
				$('#tabela').append(''+dados[i].id+''+dados[i].nome+''+dados[i].email+'');
			}
		}
	});
});

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]

Jayr Alencar

Doutorando em Ciências da Computação no Centro de Informática da Universidade Federal do Pernambuco (CIn - UFPE); Mestre pela mesma instituição; Formado em Análise e Desenvolvimento de Sistemas; Católico; Fã de O Senhor do Anéis.

Você pode gostar...

44 Resultados

  1. Elézer disse:

    Excelente conteúdo. É uma arte publicar coisas simples e com profissionalismo. Parabens!!!

  2. willyan disse:

    Muito bom!

  3. gilberto disse:

    como faço para receber imagem do banco mysql pelo ajax-json-php

  4. Hugo disse:

    Material muito bom.
    Parabéns !
    Uma dúvida.
    Como faço para passar um parâmetro para a instrução sql ?

    • Jayr Alencar disse:

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

      $.ajax({
      		data: {id: 1} // ou "id=1"
                      type:'post',		//Definimos o método HTTP usado
      		dataType: 'json',	//Definimos o tipo de retorno
      		url: 'getDados.php',//Definindo o arquivo onde serão buscados os dados
      		success: function(dados){
      			for(var i=0;dados.length>i;i++){
      				//Adicionando registros retornados na tabela
      				$('#tabela').append(''+dados[i].id+''+dados[i].nome+''+dados[i].email+'');
      			}
      		}
      	});
      

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

  5. inklys disse:

    Sem o PHP é possível?

  6. Luã disse:

    Como dar um refresh sem precisar atualizar a pagina

  7. Luis disse:

    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?

  8. Rooney disse:

    Como faço pra exibir o nome do usuário logado?

  9. Gabriel disse:

    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 =/

  10. Gabriel disse:

    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

  11. Vinícius Martins disse:

    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.

  12. Lucas disse:

    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?

    • FABIO DE BARROS ARAUJO disse:

      no código do post o endereço do jquery esta incompleto faltando o “https:”
      e o comando ” $vetor[] = array_map(‘utf8_encode’, $resultado); ” por algum motivo que ainda não descobri retorna null. alterei para ” $vetor[] = $resultado; “, assim funcionando mas deixando de converter . acredito que tenha algo a ver com a codificação do arquivo.

  13. Matheus disse:

    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!

  14. Danilo Alvarenga disse:

    Blz Jayr,

    Man, preciso pegar o valor do banco de dados e mostra em uma table , como faço isso em Jquery.

  15. Cosmo Morais disse:

    Boa aula ! Uma dúvida:e campos do tipo ou BLOB do Mysql, não consigo traze no Json poe este código PHP, tem algum outro tratamento para fazer ?
    Obrigado.

  16. Luiz disse:

    Muito bom, eu quero anexar em uma div todos os nomes do meu json, virei a noite, você poderia me dar umas dicas ?

  17. Rodrigo disse:

    cara, n conheço mto de programação… sou apenas um entusiasta do assunto… rs

    como faço p chamar a função?? no meu n esta retornando nada e não aparece nenhum erro… a unica diferença é que meu SELECT é mais complexo, com INNER, mas ele esta funcionado pq ja testei. Ele ficava direto na pagina em PHP e to tentando passar agora p esse sistema.

    vlw mto pelo post!!!

  18. Alexandre Soffiatti Santos disse:

    Como eu faço para fazer a busca de apenas um item, e jogar ele dentro de um input ?

  19. Jeferson disse:

    Amigo tenho uma dúvida somente. Esse código seu é em tempo real? Sem dar o famoso refresh na tela ?

    • Fabiano disse:

      Perfeito!

      Eu passei um parâmetro direto na url e, apesar de não ser o correto, funcionou, porém tenho que enviar 3 parâmetros, devo incluir os 3 na mesma data separados por virgula?

      Outra dúvida importante, eu preciso fazer uma nova consulta à cada registro, posso inplementar um json dentro de outro e alimentar a mesma tabela?

      Obrigado pelo post.

      Att. Fabiano.

  20. Walysson disse:

    Como eu faria para pegar uma ArrayList em java e passar para o json pra exibir em uma tabela?

  21. Bruno disse:

    Como faço isso utilizando o laravel?

  22. IGOR MARTINS disse:

    Amigo, fiz tudo direitinho, só que quando trago os dados do banco de dados para o meu html, as palavras ficam tudo zoada, reconhece os acentos, eu trouxe no tipo JSON. o que devo fazer para corrigir isso?

  23. Diogo Moura disse:

    Boa tarde teria como utilizar esse código junto com o plugin DataTables do Jquery ?? Obrigado.

  24. Marcos disse:

    Olá Jayr. Tudo bem? Sou leigo no jquery e gostaria de que os resultados fossem mostrados sem refresh. Um colega aqui fez a mesma pergunta e você sugeriu incluir setInterval(function(){seu ajax},TEMPO_EM_MILESIMOS), mas como eu faria para implementar no seu código? Obrigado!

  25. Breno disse:

    Fala jayr, gostaria de saber como eu faco para pegar por exemplo apenas o ID ou NOME de uma determinada fonte em .php, exemplo : fonte.php retorna id 1 e nome leo.
    Quero capturar o nome leo, e inserir esse em um input exemplo
    userInput.attr(‘value’, ‘leo’);
    Porem, o leo vem da query select do arquivo fonte.php que tem um json->encode e me retorna os dados dessa pesquisa.
    Quero pegar apenas um dos campos id ou nome nesse meu html.

    • Assincrono disse:

      com jquery supondo que esteja acessando pagina php com html:
      var nome =
      $(dados).find(“#ID_DA_TAG_HTML”);

      nome sera o conteudo dentro da tag html com o ID, se for classe use ponto no lugar de hashtag

      se forem dados de um json: {“nome”: “joao” }
      dadosP = JSON.parse(dados);
      var nome = dadosP.nome;

      nome será “joao”

  26. Luciano disse:

    Porque não funciona com o jquery 3?

  27. Bruno Elias disse:

    eu implementei o que eu preciso com o seu exemplo, passando um parâmetro(objeto) pra minha getDados, mas me retorna esse erro ” jquery.min.js:2 POST https://sesuite.local/se/schulze/usuario/getDados.php 500 (Internal Server Error) ” poderia me dar uma ajuda?

  28. Nilton disse:

    Olá Jayr, postando aqui uma sugestão:
    Poderia fazer um post sobre visualizar dados da tabela pai com os dados da tabela filho.

  29. Luís Otávio disse:

    Excelente tutorial, perfeitamente explicado. Obrigado! 😀

  30. Rogério Lima disse:

    Com o código abaixo, consigo cadastrar informações sem dificuldades em uma única tabela(agenda). Mas tenho apanhado bastante quando tento cadastrar fazendo uso de um json aninhado de duas tabelas(agenda+clientes).
    Conseguiria me dar uma luz quanto a isso?

    $.ajax({
    url: ‘/api/agenda’,
    data:’action=add&primeiron_cliente=’+title+’&data_inicio=’+startTime+’&data_fim=’+endTime,
    type: “POST”,
    success: function(json) {
    $(“#calendar”).fullCalendar(‘renderEvent’,
    {
    id: json.id,
    title: title,
    start: startTime,
    end: endTime,
    },
    true);
    }

    });

Deixe um comentário para Diogo Moura Cancelar resposta

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