+7

Ajax e PHP - Carregando dados sem refresh

criado por Charlles de Matos Sousa em 28/04/2008 9:49am
O resultado desse artigo será algo como a seguinte screenshot. Dois campos de combo, quando o usuário selecionar uma opção do primeiro combo, um código JavaScript irá enviar um pedido para o servidor para listar os valores do segundo combo relacionados à opção selecionada do primeiro combo.



Como estarei mostrando como montar combos dinâmicos, vamos começar criando nossas tabelas e o banco de dados no mySQL.

No código abaixo criamos uma tabela tbl_categorias com 2 campos, codigo e nome o campo codigo é do tipo SMALLINT(3) não nulo, auto increment e chave primária, o campo nome é um tipo VARCHAR(40) e não nulo.

/* Aqui eu crio o banco de dados de teste caso ele não exista. */
CREATE DATABASE IF NOT EXISTS `teste`;

/* Selecionando o banco de dados teste. */
USE `teste`;

/* Criando a tabela tbl_categorias. */
DROP TABLE IF EXISTS `tbl_categorias`;
CREATE TABLE `tbl_categorias` (
  `codigo` smallint(3) NOT NULL auto_increment,
  `nome` varchar(40) collate latin1_general_ci NOT NULL,
  PRIMARY KEY  (`codigo`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;

/* Inserindo dados na tabela tbl_categorias. */
INSERT INTO `tbl_categorias`(`codigo`,`nome`) VALUES (1,'ASP'),(2,'PHP'),(3,'.NET'),(4,'CGI');

No código abaixo criamos uma tabela tbl_subcategoria com 3 campos, codigo, categoria e nome o campo codigo é do tipo SMALLINT(3) não nulo, auto increment e chave primária,o campo categoria é um tipo SMALLINT(3) e não nulo, o campo nome é um tipo VARCHAR(40) e não nulo.

/* Criando a tabela tbl_subcategoria. */
DROP TABLE IF EXISTS `tbl_subcategoria`;

CREATE TABLE `tbl_subcategoria` (
  `codigo` smallint(3) NOT NULL auto_increment,
  `categoria` smallint(3) NOT NULL,
  `nome` varchar(40) collate latin1_general_ci NOT NULL,
  PRIMARY KEY  (`codigo`)
) ENGINE=MyISAM AUTO_INCREMENT=17 DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;

/* Inserindo dados na tabela tbl_subcategoria. */
INSERT INTO `tbl_subcategoria`(`codigo`,`categoria`,`nome`) VALUES (1,2,'Chat'),(2,3,'Formulários'),(3,1,'Data/Hora'),(4,1,'Contador'),(5,2,'Fórum'),(6,4,'Calendário'),(7,4,'E-Commerce'),(8,1,'Galeria Imagem'),(9,3,'Help'),(10,2,'Portal'),(11,3,'Contato'),(12,4,'Banner Rotativo'),(13,3,'Busca'),(14,1,'Blog'),(15,2,'Classificados'),(16,4,'Guestbooks');

Comentários:

Mostrando 1 - 9 de 9 comentários
Lucas disse:
a primeira parte eu segui como seu exemplo mostra
17/06/2011 2:43pm (~5 anos atrás)

Lucas disse:
como eu faço para colcoar mais campos no caso estou fazendo um buscador de pneus... segue o link www.tkpneus.com.br/index1.php
17/06/2011 2:42pm (~5 anos atrás)

Rogério,

Você teria que colocar os dados na SESSÃO, ou colocar algum marcador assim como o google faz http://url.com/pagina.php?teste=a#marcador.
30/11/2009 3:06pm (~7 anos atrás)

Rogério Knop disse:
Existe alguma maneira de o botão "Anterior" do browser funcionar com ajax?
30/11/2009 3:00pm (~7 anos atrás)

Danilo disse:
Teste
24/08/2009 7:59pm (~7 anos atrás)

Danilo disse:
como criar sistema de comentario sem refresh para enviar sem refresh para receber os dados do BD
24/08/2009 7:59pm (~7 anos atrás)

wellington disse:
codigo perfeito nada a reclamar facil em tudo bem didatico.

Continue assim...
23/07/2009 7:46pm (~7 anos atrás)

Wellington disse:
Olá ...
Cara magnifico esse artigo ...
Só uma Duvida que me ocorreu ...
E a conexão do Banco quando é fechada ?
04/06/2009 3:37pm (~7 anos atrás)

Willian Silva disse:
O artigo esta ótimo, porém os códigos estão cheio de comentários que acaba atrapalhando a leitura do mesmo. Procure, falar do código no texto do artigo ao invés de encher de comentários. Abração!
01/06/2009 2:20pm (~7 anos atrás)

Novo Comentário:

(Você pode usar tags como <b>, <i> ou <code>. URLs serão convertidas para links automaticamente.)