(Parte 3) Requisição AJAX utilizando a função $.get() com PHP

Requisição AJAX utilizando a função $.get() com PHPOlá pessoal, dando continuidade na série de artigos sobre requisições AJAX com o auxílio da biblioteca jQuery, hoje iremos falar sobre a função $.get().
 
Como o próprio nome diz, essa função utiliza o método HTTP GET para enviar as requisições, ela é mais simples de usar que a função $.ajax() porém não suporta tantas funcionalidades. Abaixo vou explicar as opções que são suportadas pela função $.get().
 
Outros posts sobre AJAX que podem interessar:
 
Sintaxe básica: $.get(url[,data][,success(data, textStatus, jqXHR)][, dataType])
 
url:  Essa chave recebe uma string com a URL para onde será enviada a requisição, essa chave é obrigatória.
Exemplo:

data: Essa chave recebe os valores que serão enviados para o servidor junto com a requisição, são aqueles dados que geralmente enviamos junto com a URL, chave opcional. 
Exemplo:

success: Seu valor é uma função que será executada quando a requisição for completada com sucesso. Essa função aceita 3 argumentos, sendo o primeiro os dados retornados pela requisição, segundo uma string contendo o status e terceiro um objeto XMLHttpRequest, função opcional.
Exemplo:

dataType: Essa chave recebe uma string informando o tipo de dado esperado como retorno pelo servidor, opções aceitas: xml, html, json e script, chave opcional.
Exemplo:

 

Consulta com $.get() e PHP

Bom pessoal agora que já temos um breve entendimento sobre como funcionam as opções da função $.get(), vamos para o exemplo de utilização. Aproveitando o banco de dados do artigo anterior, vamos construir uma página index.php com 2 SELECTs, o primeiro vai conter alguns nomes de países e o segundo vai conter os títulos das imagens relacionadas com o país selecionado. A ideia é carregar o SELECT com os títulos usando a função $.get(), essa requisição será disparada quando for selecionado um país, ou seja, vamos trabalhar com evento Change do SELECT, caso não seja encontrado nenhum título para aquele país o SELECT será preenchido com o valor “Vazio“;

Para refrescar a memória segue o script SQL do banco de dados: 

Vamos utilizar a mesma estrutura de scripts PHP do artigo anterior, vou postar abaixo os scripts de conexão com o banco de dados, classe image.class.php e controllerImagem.php. Observem que vou adicionando novas funcionalidades a classe image.class.php a medida que os novos artigos estão sendo postados.

conexao.php

imagem.class.php

Post relacionado:  (Parte 1) Introdução a requisições AJAX com jQuery

 
Observem que no script controllerImagem.php houve uma alteração, agora o valor esperado para variável $acao é “preencher_titulo”, essa string será enviada pela requisição através da propriedade data e o método que será chamado é o getHTMLTitulos().
controllerImagem.php

Abaixo segue o script da código HTML da página index.php que será exibida no navegador, observem que a requisição $.get() será disparada no evento Change do SELECT que contém os países. A função $.get() está recebendo as 4 opções:
url -> “controller/controllerImagem.php”
data -> { acao: ‘preencher_titulo’, pais: valorPais }
success -> function(data){}
dataType -> “html”

index.php

 

Agora vamos estilizar a página com CSS:

estilo.css

Finalizado a codificação, vamos testar a requisição!

Página inicial sem ativar o filtro:

 
 

 

Selecionando um país será carregado o SELECT “Títulos Filtrados“:

 
Ao Selecionar um país que não tem imagens, o SELECT “Títulos Filtrados” é carregado com o valor “Sem imagens cadastradas”:

 
Bom pessoal, demonstrei nesse artigo como efetuar requisições com a função $.get() que trabalha exclusivamente com o método HTTP GET, essa função é menos complexa que a função $.ajax() e por esse motivo se torna de fácil utilização. É bom salientar que as funções $.get(), $.post(), $.getJSON e $.getScript() possuem um efeito colateral em seu uso, se o arquivo requisitado não estiver disponível a requisição possivelmente não será encerrada, já na função $.ajax() existe uma verificação de erros o que impede esse tipo de problema

O uso da função $.get() é indicado quando não precisamos customizar tratamentos de erros, imagens para demonstrar o processamento e etc., funciona muito bem para carregamento de campos dinâmicos.

 
Até a próxima pessoal …
Show Buttons
Hide Buttons