03 mar 2014

(Parte 4) Requisição AJAX utilizando a função $.post() com PHP

Post sobre jQuery Por William Em março 3, 2014

Dando prosseguimento na série de artigos sobre requisições AJAX com o auxílio da biblioteca jQuery, hoje vou escrever sobre a função $.post().

Essa função tem seu funcionamento semelhante a função $.get() que foi apresentada na parte 3, inclusive suas opções de configurações. Porém a função $.post() trabalha somente com o método HTTP POST, diferente da função $.get() que utiliza o método HTTP GET.

Alguns posts sobre jQuery que podem interessar:

Aprenda como debugar AJAX sem plugin

Autocomplete com jQuery UI + PHP + MySQL

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

Com certeza agora surge a pergunta:

Qual a diferença entre os métodos GET e POST?

GET: A requisição é enviada via URL, ou seja, todos os dados que estão sendo enviados ficam visíveis na URL do navegador. Por esse motivo possui uma limitação que gira em torno de 255 caracteres, além de só aceitar textos. É o método padrão de submissão dos formulários HTML quando não informamos nenhum valor na propriedade method.

POST: Os dados da requisição são encapsulados junto ao corpo da requisição HTTP, ou seja, os dados não podem ser visualizados. Por esse motivo praticamente não existe limite no comprimento da requisição. Em termos de performance, tende a ser mais lento que o método GET, devido ao tempo para encapsular a mensagem HTML. Sem restrições para tipos de dados, aceita transportar textos e binários.

Sintaxe básica: $.post(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:

$.post({
  "cadastro/cliente.php"
})

$.post({

"cadastro/cliente.php"

})

data: Essa chave recebe os valores que serão enviados para o servidor junto com a requisição, chave opcional.
Exemplo:

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

$.post({

{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:

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

$.post({

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

})

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

$.post({
  "json"
})

$.post({

"json"

})

Consulta com $.post() e PHP

Como seu funcionamento é praticamente idêntico a função $.get(), com exceção do nome da função que agora é $.post() (index.php) e a função de captura dos dados no PHP agora será utilizado $_POST[](controllerImagem.php). 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

<?php   
    
 /*   
 * Classe imagem para manipulação dos dados da tabela TAB_IMAGEM   
 */   
 class imagem{   
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="http://www.devwilliam.com.br/jquery/parte-2-requisicao-ajax-utilizando-a-funcao-ajax-com-php" target="_blank" rel="nofollow" class="u3f861cc44bb8dd9fa4f4b6dc5e15c1b5"><!-- INLINE RELATED POSTS 1/3 //--><style> .u3f861cc44bb8dd9fa4f4b6dc5e15c1b5 , .u3f861cc44bb8dd9fa4f4b6dc5e15c1b5 .postImageUrl , .u3f861cc44bb8dd9fa4f4b6dc5e15c1b5 .centered-text-area { min-height: 80px; position: relative; } .u3f861cc44bb8dd9fa4f4b6dc5e15c1b5 , .u3f861cc44bb8dd9fa4f4b6dc5e15c1b5:hover , .u3f861cc44bb8dd9fa4f4b6dc5e15c1b5:visited , .u3f861cc44bb8dd9fa4f4b6dc5e15c1b5:active { border:0!important; } .u3f861cc44bb8dd9fa4f4b6dc5e15c1b5 .clearfix:after { content: ""; display: table; clear: both; } .u3f861cc44bb8dd9fa4f4b6dc5e15c1b5 { 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); } .u3f861cc44bb8dd9fa4f4b6dc5e15c1b5:active , .u3f861cc44bb8dd9fa4f4b6dc5e15c1b5:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #D35400; } .u3f861cc44bb8dd9fa4f4b6dc5e15c1b5 .centered-text-area { width: 100%; position: relative; } .u3f861cc44bb8dd9fa4f4b6dc5e15c1b5 .ctaText { border-bottom: 0 solid #fff; color: #ECF0F1; font-size: 16px; font-weight: bold; margin: 0; padding: 0; text-decoration: underline; } .u3f861cc44bb8dd9fa4f4b6dc5e15c1b5 .postTitle { color: #FFFFFF; font-size: 16px; font-weight: 600; margin: 0; padding: 0; width: 100%; } .u3f861cc44bb8dd9fa4f4b6dc5e15c1b5 .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; } .u3f861cc44bb8dd9fa4f4b6dc5e15c1b5:hover .ctaButton { background-color: #E67E22!important; } .u3f861cc44bb8dd9fa4f4b6dc5e15c1b5 .centered-text { display: table; height: 80px; padding-left: 18px; top: 0; } .u3f861cc44bb8dd9fa4f4b6dc5e15c1b5 .u3f861cc44bb8dd9fa4f4b6dc5e15c1b5-content { display: table-cell; margin: 0; padding: 0; padding-right: 108px; position: relative; vertical-align: middle; width: 100%; } .u3f861cc44bb8dd9fa4f4b6dc5e15c1b5:after { content: ""; display: block; clear: both; } </style><div class="centered-text-area"><div class="centered-text" style="float: left;"><div class="u3f861cc44bb8dd9fa4f4b6dc5e15c1b5-content"><span class="ctaText">Post relacionado:</span>  <span class="postTitle">(Parte 2) Requisição AJAX utilizando a função $.ajax() com PHP</span></div></div></div><div class="ctaButton"></div></a></div>     
  /*   
  * 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
 /*  
  * 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="u0cf6be9b1c923542f08390a3acc3d4c9"><!-- INLINE RELATED POSTS 2/3 //--><style> .u0cf6be9b1c923542f08390a3acc3d4c9 , .u0cf6be9b1c923542f08390a3acc3d4c9 .postImageUrl , .u0cf6be9b1c923542f08390a3acc3d4c9 .centered-text-area { min-height: 80px; position: relative; } .u0cf6be9b1c923542f08390a3acc3d4c9 , .u0cf6be9b1c923542f08390a3acc3d4c9:hover , .u0cf6be9b1c923542f08390a3acc3d4c9:visited , .u0cf6be9b1c923542f08390a3acc3d4c9:active { border:0!important; } .u0cf6be9b1c923542f08390a3acc3d4c9 .clearfix:after { content: ""; display: table; clear: both; } .u0cf6be9b1c923542f08390a3acc3d4c9 { 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); } .u0cf6be9b1c923542f08390a3acc3d4c9:active , .u0cf6be9b1c923542f08390a3acc3d4c9:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #D35400; } .u0cf6be9b1c923542f08390a3acc3d4c9 .centered-text-area { width: 100%; position: relative; } .u0cf6be9b1c923542f08390a3acc3d4c9 .ctaText { border-bottom: 0 solid #fff; color: #ECF0F1; font-size: 16px; font-weight: bold; margin: 0; padding: 0; text-decoration: underline; } .u0cf6be9b1c923542f08390a3acc3d4c9 .postTitle { color: #FFFFFF; font-size: 16px; font-weight: 600; margin: 0; padding: 0; width: 100%; } .u0cf6be9b1c923542f08390a3acc3d4c9 .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; } .u0cf6be9b1c923542f08390a3acc3d4c9:hover .ctaButton { background-color: #E67E22!important; } .u0cf6be9b1c923542f08390a3acc3d4c9 .centered-text { display: table; height: 80px; padding-left: 18px; top: 0; } .u0cf6be9b1c923542f08390a3acc3d4c9 .u0cf6be9b1c923542f08390a3acc3d4c9-content { display: table-cell; margin: 0; padding: 0; padding-right: 108px; position: relative; vertical-align: middle; width: 100%; } .u0cf6be9b1c923542f08390a3acc3d4c9:after { content: ""; display: block; clear: both; } </style><div class="centered-text-area"><div class="centered-text" style="float: left;"><div class="u0cf6be9b1c923542f08390a3acc3d4c9-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($_POST['acao'])) ? $_POST['acao'] : '';
  $pais = (isset($_POST['pais'])) ? $_POST['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;

<?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($_POST['acao'])) ? $_POST['acao'] : '';

$pais = (isset($_POST['pais'])) ? $_POST['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 $.post() será disparada no evento Change do SELECT que contém os países. A função $.post() está recebendo as 4 opções:
url -> “controller/controllerImagem.php”
data -> { acao: ‘preencher_titulo’, pais: valorPais }
success -> function(data){}
dataType -> “html”

index.php

<!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 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 $.post() e passa as opções    
      $.post(   
       "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>

<!DOCTYPE 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 $.post() e passa as opções

$.post(

"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 $post() que trabalha exclusivamente com o método HTTP POST, essa função é menos complexa que a função $.ajax() e por esse motivo se torna de fácil utilização. Vale a pena 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 $.post() também é indicado quando não precisamos customizar tratamentos de erros, imagens para demonstrar o processamento e etc., além da mesma aceitar tipos de dados variados e não ter limite de comprimento.

Até a próxima pessoal …

Tags:jQuery AJAX

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

(Parte 4) Requisição AJAX utilizando a função $.post() com PHP

Consulta com $.post() e PHP

Obrigado