Efetuando requisição Ajax com CakePHP

Me deparei hoje com uma pergunta no StackOverflow e durante uma pesquisa percebi que muitos desenvolvedores que utilizam o CakePHP, por algum motivo, não fazem requisições Ajax utilizando puramente os recursos do framework, que é um dos mais robustos que trabalhei, além da ótima documentação e larga comunidade.

Bom, aqui vai um breve passo-a-passo de como fazer este procedimento.

Como iremos trabalhar com o jQuery, que é uma das bibliotecas JavaScript mais utilizadas, será necessário fazer download e colocá-la no diretório app/webroot/js. Para facilitar, altere o nome do arquivo para jquery.js apenas. Feito isto, em nosso Controller devemos incluir o JsHelper, que irá nos auxiliar nesta implementação, sem ser necessário escrever código puro em JavaScript.

public $helpers = array('Js' => array('Jquery'));

Criaremos agora dois métodos neste mesmo Controller: index para apresentar a nossa View e request para receber a requisição Ajax.

public function index() {
	// restante do código
}

public function request() {
	// nenhum layout e nenhuma view
	$this->render(false, false);

	// parâmetros da requisição
	debug($this->request->params);
}

Em nossa View, localizada em app/View/Users/index.ctp (onde Users é nosso exemplo de Controller) teremos apenas um botão, que ao clicar será enviado uma requisição contendo dois parâmetros: foo e bar.

echo $this->Js->submit('Enviar', array('update' => '#response', 'url' => array('action' => 'request', 'foo', 'bar')));
echo $this->Html->script('jquery');
echo $this->Js->writeBuffer(array('inline' => 'true'));
echo "<div id='response'></div>";

Explicando cada linha:

  1. Utilizando o JsHelper, será criado um botão capaz de submeter um formulário utilizando a API XmlHttpRequest. A opção update indica o elemento que receberá a resposta do servidor. E a opção url, a ação requisitada junto com nossos dois parâmetros;
  2. Inclusão da biblioteca jQuery;
  3. Por padrão, os scripts são guardados em cache e você deve exibir o conteúdo do cache explicitamente;
  4. E por fim, o elemento que indicamos na opção update, que irá receber a resposta da nossa requisição.

Seguindo todos estes passos, a resposta que iremos receber no elemento indicado, será este:

array(
	'plugin' => null,
	'controller' => 'users',
	'action' => 'ajax',
	'named' => array(),
	'pass' => array(
		(int) 0 => 'foo',
		(int) 1 => 'bar'
	),
	'isAjax' => true,
	'models' => array(
		'User' => array(
			'plugin' => null,
			'className' => 'User'
		)
	)
)

Com isto, utilizamos todos os recurso do CakePHP para realizar requisições em Ajax, não sendo necessário escrever ainda mais linhas de código em um arquivo .js como aprendemos logo no início dos estudos ou mesmo quando é usado somente jQuery.

3 Comentários

  1. david balbino Responder

    Cara, incrível funcionou direitinho aqui. Já está salvo nos meus favoritos o seu site.

  2. Devidy Oliviera Responder

    Eu tenho uma dúvida, tentei fazer aqui mais não funcionou, no meu caso eu preciso do ajax em um input do tipo select. Ficou assim:

    echo $this->Form->input(‘entity’, array(
    ‘update’ => ‘#response’,
    ‘url’ => array(‘action’ => ‘request’, ‘foo’, ‘bar’),
    ‘label’ => __(‘Entidade’),
    ‘id’ => ‘entity’,
    ‘options’ => array(‘1’ => ‘Prospects’, ‘2’ => ‘Leads’),
    ‘class’ => ‘form-control’,
    ‘div’ => array(‘class’ => ‘col-sm-6’, ‘data-step’ => “2”, ‘data-intro’ => “Escolha a entidade”, ‘data-position’ => ‘bottom’)
    ));

    Segui todos os passos, mais não funciona. Quando eu copio o seu botão e colo lá ele funciona então não foi nenhum passo que eu eventualmente possa ter esquecido.

    • Paulo Rodrigues Responder

      Devidy, o JsHelper não possui um método específico para este input, então você vai precisar adicionar esse evento de outra forma, que será o equivalente ao bind do próprio jQuery. Ou seja, os parâmetros update e url não vão em qualquer elemento que você queira.

      Logo após este seu trecho, faça assim:

      $this->Js->get(‘#entity’);
      $this->Js->event(‘change’, $this->Js->request(array(‘action’ => ‘request’, ‘foo’, ‘bar’)));

      Com isso, no “change” do seu select, adicionamos este request que existe no segundo parâmetro.

      Aqui você pode ver outros métodos do JsHelper, além destes que mencionei: http://book.cakephp.org/2.0/en/core-libraries/helpers/js.html#other-methods

Deixe uma resposta