24 fev 2014

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

Post sobre jQuery Por William Em fevereiro 24, 2014

Nesta parte darei continuidade na série de artigos sobre requisições AJAX com jQuery, para os iniciantes é interessante ler esse primeiro artigo sobre Introdução a requisições AJAX.

Nesse artigo vou falar sobre a função $.ajax() que é disponibilizada pela biblioteca jQuery. Essa função carrega uma página remota usando uma requisição HTTP é a mais completa entre os 5 tipos de requisições que serão explicados nessa série de artigos, pois a mesma oferece um conjunto de funcionalidades que não estão disponíveis nos tipos de requisições ($.get(), $.post(), $.getJSON() e $.getScript()), mesmo esses outros tipos sendo na verdade derivados da função $.ajax().

Alguns 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 $.getJSON() com PHP

A sintaxe básica $.ajax(opções), abaixo será detalhado as principais opções desse tipo de requisição:

async: Valor default é TRUE o que torna todas as requisições assíncronas (executado simultâneamente), se for alterado para FALSE as requisições serão síncronas (não simultâneo). Basicamente não existe sentido em efetuar requisições síncronas com AJAX.

Exemplo:

$.ajax({  
  async: true  
});

$.ajax({

async: true

});

beforeSend: Seu valor é uma função para modificar o objeto XMLHttpRequest antes do envio, geralmente utilizada para enviar cabeçalhos HTTP personalizados ou pode chamar a exibição de uma animação gif.
Exemplo:

$.ajax({  
  beforeSend: function(){...} 
});

$.ajax({

beforeSend: function(){...}

});

cache: Valor default é TRUE, se for definido com FALSE força as páginas solicitadas a não serem armazenadas em cache do browser, essa ação só funciona corretamente para cabeçalhos e requisições do tipo GET.
Exemplo:

$.ajax({  
  cache: true 
});

$.ajax({

cache: true

});

complete: Seu valor é uma função chamada quando a requisição termina, independente se ocorrer um erro ou sucesso. Essa função aceita 2 argumentos, primeiro o objeto XMLHttpRequest e segundo uma string definindo o status de como foi finalizada a requisição (“success”, “notmodified”, “error”, “timeout”, “abort”, or “parsererror”).
Exemplo:

$.ajax({  
  complete: function(){...} 
});

$.ajax({

complete: function(){...}

});

data: Esta chave recebe os dados que serão enviados ao servidor, esse dados serão automaticamente convertidos em uma query string e anexados à URL quando a requisição for do tipo GET.
Exemplo:

$.ajax({  
  data: {cidade: 'suaCidade', estado: 'seuEstado'} 
});

$.ajax({

data: {cidade: 'suaCidade', estado: 'seuEstado'}

});

dataType: O valor é tipo de dados esperado como retorno pelo servidor, abaixo os tipo aceitos:

xml – Retorna um documento XML a ser processado.
html – Retorna um documento HTML como texto puro.
script – Processa a resposta como JavaScript e retorna o resultado como texto puro.
json – Processa a resposta como JSON e retorna o resultado como um objeto JavaScript.
jsonp – Semelhante ao json, mas admite requisições a outros domínios desde que estes as permitam.
text – Retorna uma string em texto puro.

Exemplo:

$.ajax({  
  dataType: "html" 
});

$.ajax({

dataType: "html"

});

error: Seu valor é uma função a ser chamada quando ocorre uma falha na requisição. Essa função admite 3 argumentos, primeiro o objeto XMLHttpRequest, segundo uma string descrevendo o tipo de erro (“timeout”, “error”, “abort” e “parsererror”), o terceiro argumento é um objeto opcional caso ocorra.
Exemplo:

$.ajax({  
  error: function(xhr, er){...} 
});

$.ajax({

error: function(xhr, er){...}

});

Observação: Somente a função $.ajax() possui esse tipo de tratamento de erro, as demais funções não suportam essa funcionalidade.

success: Seu valor é uma função a ser executada quando a requisição se completa com sucesso. Essa função admite 2 argumentos, primeiro são os dados retornados no formato informado no parâmetro dataType e o segundo uma string descrevendo o status.
Exemplo:

$.ajax({  
  success: function(data, status){...} 
});

$.ajax({

success: function(data, status){...}

});

type: Valor default é GET esse valor define o tipo de requisição, geralmente as requisições são do tipo GET e POST, existem ainda outros tipos como PUT e DELETE mas esses tipos não são suportados por diversos navegadores.Exemplo:

$.ajax({  
  type: "POST" 
});

$.ajax({

type: "POST"

});

url: O valo dessa chave é a URL para onde será enviada a requisição.

Exemplo:

$.ajax({  
  url: "./cadastro/cliente.php" 
});

$.ajax({

url: "./cadastro/cliente.php"

});

Bom pessoal acima listei algumas opções que a função $.ajax() suporta, mas existem outras opções que podem ser estudadas na documentação oficial da biblioteca jQuery.

Consulta com $.ajax() e PHP

Agora vamos a um exemplo prático, como essa função possibilita um tratamento mais amplo da requisição com diversas opções, elaborei um exemplo que abrange algumas das funcionalidades que foram listadas acima.

Desenvolvi uma consulta de pontos turísticos, onde será selecionado um determinado país no select e pressionado o botão carregar imagens que dispara uma requisição com a função $.ajax() para retornar uma tabela HTML. Será executada uma consulta no banco por país e será construída uma tabela contendo TAGs com o caminho para carregarem as imagens e algumas informações extras sobre o ponto turístico, exemplo bem simples.

Abaixo script SQL para criar o banco de dados e a tabela.

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`)

);

Após a construção do banco de dados temos que criar a classe PHP para se conectar ao banco de dados:

conexao.php

Post relacionado: Veja como é fácil consultar CEPs e carregar dinamicamente o endereço nos campos do seu formulário usando AJAX e jQuery

<?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;

}

O próximo passo é construir a classe que vai manipular os dados da tabela TAB_IMAGEM, nesse caso somente consultas. Essa classe possui 4 métodos sendo 1 método construtor, 2 métodos de consulta e 1 método para construir a tabela que será retornada para a página principal após a requisição AJAX ser enviada. O método getTabelaImagens() é responsável em construir a tabela HTML com os dados da consulta, se nenhum registro foi retornado do banco de dados então será enviada uma mensagem estilizada com CSS avisando que não existem imagens para aquele país.

imagens.class.php

<?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 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;   
  }   
 }

<?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 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;

}

Para separarmos as responsabilidades, vamos criar um script controllerImagem.php que será responsável por receber a requisição e devolver os dados solicitados, esse script vai fazer o meio campo entre a página index.php e a classe que manipula os dados.

controllerImagem.php

<?php
 /*  
  * 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/jquery/serie-de-videos-sobre-ajax-com-jquery" target="_blank" rel="nofollow" class="u1bdaa16ef3666d4683f4d34dcbc3ba6c"><!-- INLINE RELATED POSTS 2/3 //--><style> .u1bdaa16ef3666d4683f4d34dcbc3ba6c , .u1bdaa16ef3666d4683f4d34dcbc3ba6c .postImageUrl , .u1bdaa16ef3666d4683f4d34dcbc3ba6c .centered-text-area { min-height: 80px; position: relative; } .u1bdaa16ef3666d4683f4d34dcbc3ba6c , .u1bdaa16ef3666d4683f4d34dcbc3ba6c:hover , .u1bdaa16ef3666d4683f4d34dcbc3ba6c:visited , .u1bdaa16ef3666d4683f4d34dcbc3ba6c:active { border:0!important; } .u1bdaa16ef3666d4683f4d34dcbc3ba6c .clearfix:after { content: ""; display: table; clear: both; } .u1bdaa16ef3666d4683f4d34dcbc3ba6c { 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); } .u1bdaa16ef3666d4683f4d34dcbc3ba6c:active , .u1bdaa16ef3666d4683f4d34dcbc3ba6c:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #D35400; } .u1bdaa16ef3666d4683f4d34dcbc3ba6c .centered-text-area { width: 100%; position: relative; } .u1bdaa16ef3666d4683f4d34dcbc3ba6c .ctaText { border-bottom: 0 solid #fff; color: #ECF0F1; font-size: 16px; font-weight: bold; margin: 0; padding: 0; text-decoration: underline; } .u1bdaa16ef3666d4683f4d34dcbc3ba6c .postTitle { color: #FFFFFF; font-size: 16px; font-weight: 600; margin: 0; padding: 0; width: 100%; } .u1bdaa16ef3666d4683f4d34dcbc3ba6c .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; } .u1bdaa16ef3666d4683f4d34dcbc3ba6c:hover .ctaButton { background-color: #E67E22!important; } .u1bdaa16ef3666d4683f4d34dcbc3ba6c .centered-text { display: table; height: 80px; padding-left: 18px; top: 0; } .u1bdaa16ef3666d4683f4d34dcbc3ba6c .u1bdaa16ef3666d4683f4d34dcbc3ba6c-content { display: table-cell; margin: 0; padding: 0; padding-right: 108px; position: relative; vertical-align: middle; width: 100%; } .u1bdaa16ef3666d4683f4d34dcbc3ba6c:after { content: ""; display: block; clear: both; } </style><div class="centered-text-area"><div class="centered-text" style="float: left;"><div class="u1bdaa16ef3666d4683f4d34dcbc3ba6c-content"><span class="ctaText">Post relacionado:</span>  <span class="postTitle">AJAX com jQuery - Série de vídeos com exemplos</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 == "ver"):  
 
    /*  
    * Atribui a conexão PDO configurada  
    */  
    $pdo = Conexao::getInstance();  
 
    /*  
    * Instância o objeto imagem();  
    */  
    $imagem = new imagem($pdo);  
 
    /*  
    * Escreve o retorno do método getTabelaImagens()   
    * esse conteúdo será devolvido para requisição AJAX  
    * contendo a tabela ou a mensagem, sempre no formato HTML  
    */  
    echo $imagem->getTabelaImagens($pais);  
  endif;

<?php

* 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 == "ver"):

* Atribui a conexão PDO configurada

$pdo = Conexao::getInstance();

* Instância o objeto imagem();

$imagem = new imagem($pdo);

* Escreve o retorno do método getTabelaImagens()

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

* contendo a tabela ou a mensagem, sempre no formato HTML

echo $imagem->getTabelaImagens($pais);

endif;

Agora vem a página index.php que será exibida no navegador, ao selecionar um pais e clicar no botão “Carregar Imagens” será disparado o evento Click e consequentemente será enviada a requisição usando a função $.ajax().

Observem que só será enviada a requisição se for selecionado no SELECT um valor diferente de ‘0’, na opção beforeSend mandei exibir uma animação gif enquanto a requisição não é completada e na opção error formatei o conteúdo da mensagem de erro caso a mesma precise ser exibida na página, todas as opções foram explicadas acima. Estou usando a versão da biblioteca jQuery do próprio google, setando a URL: //ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js, mas se for o caso podemos baixar essa biblioteca diretamente no site jQuery e trabalhar localmente.

index.php

<!DOCTYPE html>    
 <!DOCTYPE html>   
 <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 click do botão         
    $('#btnLoad').click(function(e){   
      e.preventDefault();  
   
      // Atribui de valores para variáveis   
      var pais = $('#cmbPais').val();   
      var result = document.getElementById("resultado");    
        
      // Verifica se foi selecionado um valor diferente de '0'              
      if (pais != '0'){  
  
       // Chama a função $.ajax() e passa as opções              
       $.ajax({   
         url: 'controller/controllerImagem.php',   
         type : 'get',   
         data : {   
           'acao': 'ver',   
           'pais': pais   
         },   
         dataType : 'html',   
         beforeSend: function(){   
           // Exibe uma animação enquanto a requisição é processada                       
           $(result).html('<center><img src="imagem/progresso.gif"/></center>');    
         },   
         success: function(retorno){   
           // Atribui o retorno HTML para a div correspondente                       
           $(result).html(retorno);      
         },   
         error: function(erro, er){   
           // Se houver um erro durante o processamento, exibe a mensagem na div correspondente                       
           $(result).html('<p class="destaque">Erro ' + erro.status + ' - ' + erro.statusText + '</br> Tipo de erro: ' + er + '</p>');   
         }   
       });   
      }   
    });   
         
   });   
  </script>   
  </head>   
  <body>    
   <div id="conteudo" class="arredondar">   
    <fieldset class="arredondar">   
     <legend>Filtro de Imagens</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>   
      <option value="Todos">Todos</option>   
     </select>   
     <hr>   
     <input type="button" value="Carregar Imagens" id="btnLoad"/>   
    </fieldset>   
    <fieldset id="resultado" class="arredondar">   
     <legend>Pontos Turísticos</legend>   
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="http://www.devwilliam.com.br/jquery/parte-3-requisicao-ajax-utilizando-a-funcao-get-com-php" target="_blank" rel="nofollow" class="u3791deeb2220115461f38e400c0054d2"><!-- INLINE RELATED POSTS 3/3 //--><style> .u3791deeb2220115461f38e400c0054d2 , .u3791deeb2220115461f38e400c0054d2 .postImageUrl , .u3791deeb2220115461f38e400c0054d2 .centered-text-area { min-height: 80px; position: relative; } .u3791deeb2220115461f38e400c0054d2 , .u3791deeb2220115461f38e400c0054d2:hover , .u3791deeb2220115461f38e400c0054d2:visited , .u3791deeb2220115461f38e400c0054d2:active { border:0!important; } .u3791deeb2220115461f38e400c0054d2 .clearfix:after { content: ""; display: table; clear: both; } .u3791deeb2220115461f38e400c0054d2 { 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); } .u3791deeb2220115461f38e400c0054d2:active , .u3791deeb2220115461f38e400c0054d2:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #D35400; } .u3791deeb2220115461f38e400c0054d2 .centered-text-area { width: 100%; position: relative; } .u3791deeb2220115461f38e400c0054d2 .ctaText { border-bottom: 0 solid #fff; color: #ECF0F1; font-size: 16px; font-weight: bold; margin: 0; padding: 0; text-decoration: underline; } .u3791deeb2220115461f38e400c0054d2 .postTitle { color: #FFFFFF; font-size: 16px; font-weight: 600; margin: 0; padding: 0; width: 100%; } .u3791deeb2220115461f38e400c0054d2 .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; } .u3791deeb2220115461f38e400c0054d2:hover .ctaButton { background-color: #E67E22!important; } .u3791deeb2220115461f38e400c0054d2 .centered-text { display: table; height: 80px; padding-left: 18px; top: 0; } .u3791deeb2220115461f38e400c0054d2 .u3791deeb2220115461f38e400c0054d2-content { display: table-cell; margin: 0; padding: 0; padding-right: 108px; position: relative; vertical-align: middle; width: 100%; } .u3791deeb2220115461f38e400c0054d2:after { content: ""; display: block; clear: both; } </style><div class="centered-text-area"><div class="centered-text" style="float: left;"><div class="u3791deeb2220115461f38e400c0054d2-content"><span class="ctaText">Post relacionado:</span>  <span class="postTitle">(Parte 3) Requisição AJAX utilizando a função $.get() com PHP</span></div></div></div><div class="ctaButton"></div></a></div>        
    </fieldset>   
   </div>   
  </body>   
 </html>

<!DOCTYPE html>

<html>

<head>

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

$(document).ready(function(){

// Evento click do botão

$('#btnLoad').click(function(e){

e.preventDefault();

// Atribui de valores para variáveis

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

var result = document.getElementById("resultado");

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

if (pais != '0'){

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

$.ajax({

url: 'controller/controllerImagem.php',

type : 'get',

data : {

'acao': 'ver',

'pais': pais

dataType : 'html',

beforeSend: function(){

// Exibe uma animação enquanto a requisição é processada

$(result).html('<center><img src="imagem/progresso.gif"/></center>');

success: function(retorno){

// Atribui o retorno HTML para a div correspondente

$(result).html(retorno);

error: function(erro, er){

// Se houver um erro durante o processamento, exibe a mensagem na div correspondente

$(result).html('<p class="destaque">Erro ' + erro.status + ' - ' + erro.statusText + '</br> Tipo de erro: ' + er + '</p>');

}

});

}

});

</script>

</head>

<body>

<legend>Filtro de Imagens</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>

<option value="Todos">Todos</option>

</select>

<hr>

</fieldset>

<legend>Pontos Turísticos</legend>

</fieldset>

</div>

</body>

</html>

Para finalizar, vamos estilizar essa página com um pouco de CSS:

estilo.css

body{ 
    margin: 0; 
    padding: 0; 
    background-color: darkgrey; 
    font-family: Verdana;
}   
 
fieldset{ 
    border: 2px solid olivedrab; 
    padding: 15px; 
    width: 300px; 
    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: 300px;

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;

}

Depois de tanto trabalho vamos aos testes .. rsrsrsr

Página inicial sem ativar o filtro:

Selecionando um país e pressionando o botão Carregar Imagens:

Selecionando um país que não tem imagens cadastradas no banco de dados:

Bom pessoal, infelizmente não é possível observar pelas imagens que a página não dá o famoso refresh quando é clicado no botão Carregar Imagens, mas a intenção desse exemplo é mostrar como carregar o conteúdo dinamicamente utilizando as várias opções que a função $.ajax() disponibiliza. Talvez essa função seja complexa se comparada com as funções $.get() e $.post, porém ela proporciona a possibilidade de customizarmos vários aspectos da requisição, tratamento de erros, mensagens de aviso e tipos de retorno.

Até a próxima …

Tags:jQuery AJAX

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

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

Consulta com $.ajax() e PHP

Obrigado