Postagem

Aqui é onde faço postagens de coisas que acho interessante.

CakePHP - Trabalhando com requisição ajax

Postagem do dia 05/07/2013 na categoria CakePHP



Vou mostrar como fazer requisição ajax usando o CakePHP.
Vou criar uma aplicação simples, uma tela em branco com um botão para exibir a data e hora atual.

Criando o Controller

Vamos comeà§ar criando um controller chamado: NewsController, o nome do arquivo será NewsController.php e deverá ser salvo dentro de app/Controller/

<?php
class NewsController extends AppController{

  /**
   * index Method
   * Metodo principal da aplicacao
   */
  public function index()
  {
  }

  /**
   * getDateTime Method
   * Metodo que exite a data atual
   */
  public function getDateTime()
  {
     // Este atributo armazena o nome do template a ser usado quando a requisicao for feita pelo ajax
     $this->layout = 'ajax';

     // Setando data e hora atual para ser impressa na view get_date_time.ctp
     $this->set( 'date', date( 'd/m/Y h:m:i:s' ) );
  }
}


Criando as Views

Após ter sido criado o controller, vou criar dentro do diretorio app/View/ um diretório chamdo News/ e dentro dele dois arquivos; um chamado index.ctp e outro chamado get_date_time.ctp..

No index.ctp vamos montar nosso html, criaremos um botão que quando clicado exibirá a data e hora atual dentro de uma div.

<?php
// Este trecho ira dizer ao cake para carregar o arquvo jquery.js e um arquivo chamado ajax.js
$this->Html->script( 
	array( 'jquery', 'ajax' ),
	array( 
		'inline' => false 
	) 
);
?>
<button id='btn'>Exibir data e hora tual</button>
<div id='data_hora'></div>


Agora no nosso arquivo get_date_time.ctp vamos inserir o seguinte código:

<?php
echo json_encode( array( 'success' => true, 'html' => $date ) );

Neste arquivo irá conter o conteúdo solicitado pela requisicao ajax e que deverá ter seu conteúdo tratado e visualizado na view index.ctp dentro da div.

Baixando Jquery e criando script para requisição ajax

Agora baixe o jquery deste link ( Aqui ) e salve dentro do diretorio app/webroot/js/ e em seguida altere seu nome para jquery.js.
Crie um aruqivo chamado ajax.js com o seguinte conteúdo:


$(document).ready(function() {             

	$( "#btn" ).click(function(){    
		
        $.get(
            "news/getDateTime/",
            null,
            function(data){ 
            	 
            	var retorno = jQuery.parseJSON( data );
            	            	
            	if( retorno.success ){
                	$("#data_hora").html(retorno.html);
                }
            }
        ); 
    }); 
        
});

Após ter criado o arquivo que irá gerenciar a requisição ajax, acesse seu projeto no navegador, exemplo: http://localhost/teste/news e em seguida clique no botão para que a data e hora seja exibida na tela, faà§a isso repetidas vezes e veja que os segundos irão alterar.



Deixe seus comentários abaixo: