26 fev 2014

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

Post sobre jQuery Por William Em fevereiro 26, 2014

Olá 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:

AJAX com jQuery – Série de vídeos com exemplos

Aprenda como debugar AJAX sem plugin

Requisição AJAX utilizando a função $.ajax() com PHP

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:

$.get({
  "cadastro/produtos.php"
})

$.get({

"cadastro/produtos.php"

})

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:

$.get({
  {nome: 'William', estado: 'SP'}
})

$.get({

{nome: 'William', estado: 'SP'}

})

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:

$.get({
  function(data, textStatus, jqXHR){...}
})

$.get({

function(data, textStatus, jqXHR){...}

})

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:

$.get({
  "json"
})

$.get({

"json"

})

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:

CREATE DATABASE DB_BLOG;

USE DB_BLOG;

CREATE TABLE `TAB_IMAGEM` (  
  `idImagem` int(10) unsigned NOT NULL AUTO_INCREMENT,  
  `titulo` varchar(45) NOT NULL,  
  `descricao` varchar(200) NOT NULL,  
  `caminho` varchar(250) NOT NULL,  
  `pais` varchar(30) NOT NULL,  
  PRIMARY KEY (`idImagem`)  
 );

CREATE DATABASE DB_BLOG;

USE DB_BLOG;

CREATE TABLE `TAB_IMAGEM` (

`idImagem` int(10) unsigned NOT NULL AUTO_INCREMENT,

`titulo` varchar(45) NOT NULL,

`descricao` varchar(200) NOT NULL,

`caminho` varchar(250) NOT NULL,

`pais` varchar(30) NOT NULL,

PRIMARY KEY (`idImagem`)

);

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

<?php
  /*   
  * Constantes de parâmetros para configuração da conexão   
  */   
  define('HOST', 'localhost');   
  define('DBNAME', 'DB_BLOG');   
  define('CHARSET', 'utf8');   
  define('USER', 'root');   
  define('PASSWORD', '12345');   
 
  class Conexao {   
 
   /*   
   * Atributo estático de conexão   
   */   
   private static $pdo;  
 
   /*   
   * Escondendo o construtor da classe   
   */   
   private function __construct() {   
    //   
   }   
 
   /*   
   * Método estático para retornar uma conexão válida   
   * Verifica se já existe uma instância da conexão, caso não, configura uma nova conexão   
   */   
   public static function getInstance() {   
     if (!isset(self::$pdo)):  
       try {   
         $opcoes = array();   
         self::$pdo = new PDO("mysql:host=" . HOST . "; dbname=" . DBNAME . "; charset=" . CHARSET . ";", USER, PASSWORD, $opcoes);   
         self::$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);  
       } catch (PDOException $e) {   
         print "Erro: " . $e->getMessage();   
       }   
     endif;   
     return self::$pdo;   
   }   
  }

<?php

* Constantes de parâmetros para configuração da conexão

define('HOST', 'localhost');

define('DBNAME', 'DB_BLOG');

define('CHARSET', 'utf8');

define('USER', 'root');

define('PASSWORD', '12345');

class Conexao {

* Atributo estático de conexão

private static $pdo;

* Escondendo o construtor da classe

private function __construct() {

}

* Método estático para retornar uma conexão válida

* Verifica se já existe uma instância da conexão, caso não, configura uma nova conexão

public static function getInstance() {

if (!isset(self::$pdo)):

try {

$opcoes = array();

self::$pdo = new PDO("mysql:host=" . HOST . "; dbname=" . DBNAME . "; charset=" . CHARSET . ";", USER, PASSWORD, $opcoes);

self::$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch (PDOException $e) {

print "Erro: " . $e->getMessage();

}

endif;

return self::$pdo;

}

imagem.class.php

Post relacionado: AJAX com jQuery - Série de vídeos com exemplos

<?php   
    
 /*   
 * Classe imagem para manipulação dos dados da tabela TAB_IMAGEM   
 */   
 class imagem{   
     
  /*   
  * Atributo privado para conexão PDO   
  */   
  private $pdo = null;   
     
  /*   
  * Construtor da classe    
  * @param $conexao - Conexão PDO com o banco de dados   
  */   
  public function __construct($conexao) {   
   $this->pdo = $conexao;   
  }   
     
  /*   
  * Método privado para retornar todos os registros   
  * @return $dados - Array contendo os registros   
  */   
  private function geAllImagem(){   
   try{    
    $sql = "SELECT * FROM TAB_IMAGEM ORDER BY pais";   
    $stm = $this->pdo->prepare($sql);   
    $stm->execute();   
    $dados = $stm->fetchAll(PDO::FETCH_OBJ);   
       
    return $dados;   
   } catch (PDOException $e) {    
    print "Erro: " . $e->getMessage();    
   }    
  }   
     
  /*   
  * Método privado para retornar somente os registros com o país informado   
  * @return $dados - Array contendo registros filtrados por país   
  */   
  private function getFilterImagem($pais){   
   try{   
    $where = ($pais != 'Todos') ? "WHERE pais = ?" : "ORDER BY pais" ;   
    $sql = "SELECT * FROM TAB_IMAGEM " . $where;   
    $stm = $this->pdo->prepare($sql);   
    $stm->bindValue(1, $pais);   
    $stm->execute();   
    $dados = $stm->fetchAll(PDO::FETCH_OBJ);   
       
    return $dados;   
   } catch (PDOException $e) {    
    print "Erro: " . $e->getMessage();    
   }   
  }   

  /*   
  * Método privado para retornar os títulos dos país filtrado   
  * @return $dados - Array contendo os títulos filtrados por país   
  */   
  private function getTitulosImagem($pais){   
   try{   
    $sql = "SELECT titulo FROM TAB_IMAGEM WHERE pais = ?";   
    $stm = $this->pdo->prepare($sql);   
    $stm->bindValue(1, $pais);   
    $stm->execute();   
    $dados = $stm->fetchAll(PDO::FETCH_OBJ);   
       
    return $dados;   
   } catch (PDOException $e) {    
    print "Erro: " . $e->getMessage();    
   }   
  }
     
  /*   
  * Método público que constrói a tabela HTML com os registros recebidos   
  * @param $pais - País a ser filtrado   
  * @return $retorno - String HTML para ser exibida   
  */   
  public function getTabelaImagens($pais=null){   
   $retorno = "<legend>Pontos Turísticos</legend>";   
    
   if(!empty($pais)):   
    $dados = $this->getFilterImagem($pais);   
   else:   
    $dados = $this->geAllImagem();   
   endif;   
    
   if(!empty($dados)):   
    $retorno .= "<table cellspacing='10'>";   
    foreach ($dados as $reg):    
     $retorno .= "<tr>";   
     $retorno .= "<td>";   
     $retorno .= "<img src='{$reg->caminho}' id='imagem' class='arredondar'/>";   
     $retorno .= "</td>";   
     $retorno .= "<td>";   
     $retorno .= "<span class='titulo'>País:</span> {$reg->pais}";  
     $retorno .= "</br>";   
     $retorno .= "<span class='titulo'>Título:</span> {$reg->titulo}";
     $retorno .= "</br>";   
     $retorno .= "<span class='titulo'>Descrição:</span> <span class='texto'>{$reg->descricao}</span></br>";   
     $retorno .= "</td>";   
     $retorno .= "</tr>";   
    endforeach;   
    $retorno .= "</table>";   
   else:   
    $retorno .= "<span class='destaque'>Não existem imagens para esse País!</span>";   
   endif;   
    
   return $retorno;   
  }  

  /*    
  * Método público que constrói o código HTML com os títulos   
  * @return $retorno - String HTML para ser preenchida  
  */    
  public function getHTMLTitulos($pais){    
   if(!empty($pais)):    
    $dados = $this->getFilterImagem($pais);    
   endif;   
     
   $retorno = "";  
   if (isset($dados) && !empty($dados)):  
    $retorno .= "<option>Títulos</option>";  
    foreach ($dados as $reg):  
      $retorno .= "<option>{$reg->titulo}</option>";  
    endforeach;  
   else:  
    $retorno .= "<option>Sem imagens cadastradas</option>";  
   endif;  
    
   return $retorno;    
  }   
 }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

<?php

* Classe imagem para manipulação dos dados da tabela TAB_IMAGEM

class imagem{

* Atributo privado para conexão PDO

private $pdo = null;

* Construtor da classe

* @param $conexao - Conexão PDO com o banco de dados

public function __construct($conexao) {

$this->pdo = $conexao;

}

* Método privado para retornar todos os registros

* @return $dados - Array contendo os registros

private function geAllImagem(){

try{

$sql = "SELECT * FROM TAB_IMAGEM ORDER BY pais";

$stm = $this->pdo->prepare($sql);

$stm->execute();

$dados = $stm->fetchAll(PDO::FETCH_OBJ);

return $dados;

} catch (PDOException $e) {

print "Erro: " . $e->getMessage();

}

* Método privado para retornar somente os registros com o país informado

* @return $dados - Array contendo registros filtrados por país

private function getFilterImagem($pais){

try{

$where = ($pais != 'Todos') ? "WHERE pais = ?" : "ORDER BY pais" ;

$sql = "SELECT * FROM TAB_IMAGEM " . $where;

$stm = $this->pdo->prepare($sql);

$stm->bindValue(1, $pais);

$stm->execute();

$dados = $stm->fetchAll(PDO::FETCH_OBJ);

return $dados;

} catch (PDOException $e) {

print "Erro: " . $e->getMessage();

}

* Método privado para retornar os títulos dos país filtrado

* @return $dados - Array contendo os títulos filtrados por país

private function getTitulosImagem($pais){

try{

$sql = "SELECT titulo FROM TAB_IMAGEM WHERE pais = ?";

$stm = $this->pdo->prepare($sql);

$stm->bindValue(1, $pais);

$stm->execute();

$dados = $stm->fetchAll(PDO::FETCH_OBJ);

return $dados;

} catch (PDOException $e) {

print "Erro: " . $e->getMessage();

}

* Método público que constrói a tabela HTML com os registros recebidos

* @param $pais - País a ser filtrado

* @return $retorno - String HTML para ser exibida

public function getTabelaImagens($pais=null){

$retorno = "<legend>Pontos Turísticos</legend>";

if(!empty($pais)):

$dados = $this->getFilterImagem($pais);

else:

$dados = $this->geAllImagem();

endif;

if(!empty($dados)):

$retorno .= "<table cellspacing='10'>";

foreach ($dados as $reg):

$retorno .= "<tr>";

$retorno .= "<td>";

$retorno .= "<img src='{$reg->caminho}' id='imagem' class='arredondar'/>";

$retorno .= "</td>";

$retorno .= "<td>";

$retorno .= "<span class='titulo'>País:</span> {$reg->pais}";

$retorno .= "</br>";

$retorno .= "<span class='titulo'>Título:</span> {$reg->titulo}";

$retorno .= "</br>";

$retorno .= "<span class='titulo'>Descrição:</span> <span class='texto'>{$reg->descricao}</span></br>";

$retorno .= "</td>";

$retorno .= "</tr>";

endforeach;

$retorno .= "</table>";

else:

$retorno .= "<span class='destaque'>Não existem imagens para esse País!</span>";

endif;

return $retorno;

}

* Método público que constrói o código HTML com os títulos

* @return $retorno - String HTML para ser preenchida

public function getHTMLTitulos($pais){

if(!empty($pais)):

$dados = $this->getFilterImagem($pais);

endif;

$retorno = "";

if (isset($dados) && !empty($dados)):

$retorno .= "<option>Títulos</option>";

foreach ($dados as $reg):

$retorno .= "<option>{$reg->titulo}</option>";

endforeach;

else:

$retorno .= "<option>Sem imagens cadastradas</option>";

endif;

return $retorno;

}

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

<!--?php  <br /?--> 
 /*  
  * Require dos scripts que serão utilizados  
  */  
  require_once "../conexao/conexao.php";  
  require_once "../classes/imagem.class.php";  
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="http://www.devwilliam.com.br/php/upload-de-imagens-usando-ajax-e-php" target="_blank" rel="nofollow" class="u9efd6345b3ab8a02c1cc1a5cc293c42f"><!-- INLINE RELATED POSTS 2/3 //--><style> .u9efd6345b3ab8a02c1cc1a5cc293c42f , .u9efd6345b3ab8a02c1cc1a5cc293c42f .postImageUrl , .u9efd6345b3ab8a02c1cc1a5cc293c42f .centered-text-area { min-height: 80px; position: relative; } .u9efd6345b3ab8a02c1cc1a5cc293c42f , .u9efd6345b3ab8a02c1cc1a5cc293c42f:hover , .u9efd6345b3ab8a02c1cc1a5cc293c42f:visited , .u9efd6345b3ab8a02c1cc1a5cc293c42f:active { border:0!important; } .u9efd6345b3ab8a02c1cc1a5cc293c42f .clearfix:after { content: ""; display: table; clear: both; } .u9efd6345b3ab8a02c1cc1a5cc293c42f { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #2980B9; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); } .u9efd6345b3ab8a02c1cc1a5cc293c42f:active , .u9efd6345b3ab8a02c1cc1a5cc293c42f:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #D35400; } .u9efd6345b3ab8a02c1cc1a5cc293c42f .centered-text-area { width: 100%; position: relative; } .u9efd6345b3ab8a02c1cc1a5cc293c42f .ctaText { border-bottom: 0 solid #fff; color: #ECF0F1; font-size: 16px; font-weight: bold; margin: 0; padding: 0; text-decoration: underline; } .u9efd6345b3ab8a02c1cc1a5cc293c42f .postTitle { color: #FFFFFF; font-size: 16px; font-weight: 600; margin: 0; padding: 0; width: 100%; } .u9efd6345b3ab8a02c1cc1a5cc293c42f .ctaButton { background-color: #3498DB!important; color: #ECF0F1; border: none; border-radius: 3px; box-shadow: none; font-size: 14px; font-weight: bold; line-height: 26px; moz-border-radius: 3px; text-align: center; text-decoration: none; text-shadow: none; width: 80px; min-height: 80px; background: url(http://www.devwilliam.com.br/wp-content/plugins/intelly-related-posts/assets/images/simple-arrow.png)no-repeat; position: absolute; right: 0; top: 0; } .u9efd6345b3ab8a02c1cc1a5cc293c42f:hover .ctaButton { background-color: #E67E22!important; } .u9efd6345b3ab8a02c1cc1a5cc293c42f .centered-text { display: table; height: 80px; padding-left: 18px; top: 0; } .u9efd6345b3ab8a02c1cc1a5cc293c42f .u9efd6345b3ab8a02c1cc1a5cc293c42f-content { display: table-cell; margin: 0; padding: 0; padding-right: 108px; position: relative; vertical-align: middle; width: 100%; } .u9efd6345b3ab8a02c1cc1a5cc293c42f:after { content: ""; display: block; clear: both; } </style><div class="centered-text-area"><div class="centered-text" style="float: left;"><div class="u9efd6345b3ab8a02c1cc1a5cc293c42f-content"><span class="ctaText">Post relacionado:</span>  <span class="postTitle">Aprenda como fazer Upload de imagens usando AJAX e PHP sem Refresh na Página</span></div></div></div><div class="ctaButton"></div></a></div> 
  /*  
  * Recebe os dados da requisição  
  */  
  $acao = (isset($_GET['acao'])) ? $_GET['acao'] : '';
  $pais = (isset($_GET['pais'])) ? $_GET['pais'] : ''; 
 
  /*  
  * Verifica a ação solicitada  
  */  
  if ($acao == "preencher_titulo"):  
 
    /*  
    * Atribui a conexão PDO configurada  
    */  
    $pdo = Conexao::getInstance();  
 
    /*  
    * Instância o objeto imagem();  
    */  
    $imagem = new imagem($pdo);  
 
    /*  
    * Escreve o retorno do método getHTMLTitulos()   
    * esse conteúdo será devolvido para requisição AJAX  
    * contendo o código HTML para preencher o SELECT. 
    */  
    echo $imagem->getHTMLTitulos($pais);  
  endif;

* Require dos scripts que serão utilizados

require_once "../conexao/conexao.php";

require_once "../classes/imagem.class.php";

* Recebe os dados da requisição

$acao = (isset($_GET['acao'])) ? $_GET['acao'] : '';

$pais = (isset($_GET['pais'])) ? $_GET['pais'] : '';

* Verifica a ação solicitada

if ($acao == "preencher_titulo"):

* Atribui a conexão PDO configurada

$pdo = Conexao::getInstance();

* Instância o objeto imagem();

$imagem = new imagem($pdo);

* Escreve o retorno do método getHTMLTitulos()

* esse conteúdo será devolvido para requisição AJAX

* contendo o código HTML para preencher o SELECT.

echo $imagem->getHTMLTitulos($pais);

endif;

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

<html>    
   <head>    
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
   <title>Carregando Imagens com auxílio do AJAX</title>    
   <link rel="stylesheet" type="text/css" href="css/estilo.css"/>    
   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>    
   <script>    
   $(document).ready(function(){   
      
    // Evento change do SELECT   
    $('#cmbPais').change(function(){   
           
      // Atribui o valor selecionado no SELECT para variável 'valorPais'   
      var valorPais = $('#cmbPais').val();   
      
      // Verifica se foi selecionado um valor diferente de '0'   
      if(valorPais != 0){   
   
       // Chama a função $.get() e passa as opções             
       $.get(   
        "controller/controllerImagem.php",   
        { acao: 'preencher_titulo', pais: valorPais },   
        function(data){
  
         // Atribui o retorno HTML para o SELECT                   
         $('#cmbTitulo').html(data).show();   
        },   
        "html"   
       );   
      }   
    });  
    
   });    
   </script>    
   </head>    
   <body>    
   <div id="conteudo" class="arredondar">    
    <fieldset class="arredondar">    
    <legend>Filtrar Títulos</legend>    
    <label>Selecione o País:</label>    
    <select id="cmbPais">    
     <option value="0">Selecione</option>    
     <option value="Brasil">Brasil</option>    
     <option value="França">França</option>    
     <option value="Itália">Itália</option>    
     <option value="Portugal">Portugal</option>    
    </select>    
    <label>Títulos filtrados:</label>    
    <select id="cmbTitulo">   
     <option value="0">Vazio</option>    
    </select>   
    </fieldset>    
   </div>    
   </body>    
  </html>

<html>

<head>

<title>Carregando Imagens com auxílio do AJAX</title>

$(document).ready(function(){

// Evento change do SELECT

$('#cmbPais').change(function(){

// Atribui o valor selecionado no SELECT para variável 'valorPais'

var valorPais = $('#cmbPais').val();

// Verifica se foi selecionado um valor diferente de '0'

if(valorPais != ){

// Chama a função $.get() e passa as opções

$.get(

"controller/controllerImagem.php",

{ acao: 'preencher_titulo', pais: valorPais },

function(data){

// Atribui o retorno HTML para o SELECT

$('#cmbTitulo').html(data).show();

"html"

);

}

});

</script>

</head>

<body>

<legend>Filtrar Títulos</legend>

<label>Selecione o País:</label>

<option value="0">Selecione</option>

<option value="Brasil">Brasil</option>

<option value="França">França</option>

<option value="Itália">Itália</option>

<option value="Portugal">Portugal</option>

</select>

<label>Títulos filtrados:</label>

<option value="0">Vazio</option>

</select>

</fieldset>

</div>

</body>

</html>

Agora vamos estilizar a página com CSS:

estilo.css

body{   
   margin: 0;   
   padding: 0;   
   background-color: darkgrey;   
   font-family: Verdana;  
 }    
 
 fieldset{   
   border: 2px solid olivedrab;   
   padding: 15px;   
   width: 400px;   
   min-height: 50px;   
   margin: 0 auto;  
 }   
 
 input, select {   
   cursor: pointer;  
 }  
 
 #conteudo{   
   padding: 10px;   
   width: 80%;   
   min-height: 500px;   
   background-color: white;   
   margin: 10px auto;   
   border: 2px solid olivedrab;   
   box-shadow: 5px 5px 5px green;  
 }   
 
 #imagem{   
   border: 2px solid olivedrab;   
 }   
 
 #resultado{   
   border: 2px solid olivedrab;   
   padding: 15px; width: 700px;   
   min-height: 50px;   
   margin: 0 auto;  
 }    
 
 .destaque{   
   color: red;   
   font-weight: bold;   
   text-align: center  
 }   
 
 .arredondar{   
   border-radius: 10px;   
 }   
 
 .titulo{   
   color: olivedrab;   
   font-weight: bold;   
   text-decoration: underline;   
 }   
 
  .texto{   
   text-align: justify;  
 }

body{

margin: ;

padding: ;

background-color: darkgrey;

font-family: Verdana;

}

fieldset{

border: 2px solid olivedrab;

padding: 15px;

width: 400px;

min-height: 50px;

margin: auto;

}

input, select {

cursor: pointer;

}

#conteudo{

padding: 10px;

width: 80%;

min-height: 500px;

background-color: white;

margin: 10px auto;

border: 2px solid olivedrab;

box-shadow: 5px 5px 5px green;

}

#imagem{

border: 2px solid olivedrab;

}

#resultado{

border: 2px solid olivedrab;

padding: 15px; width: 700px;

min-height: 50px;

margin: auto;

}

.destaque{

color: red;

font-weight: bold;

text-align: center

}

.arredondar{

border-radius: 10px;

}

.titulo{

color: olivedrab;

font-weight: bold;

text-decoration: underline;

}

.texto{

text-align: justify;

}

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 …

Tags:jQuery AJAX

DevWilliam – Programação, Banco de dados e Linux

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

Consulta com $.get() e PHP

Obrigado