CakePHP and AJAX

CakeFestConference2014-MarkScherer(@dereuromark)

UsingCakePHPfor6+years(startingwith1.2)CoreDevelopersince2+yearsActivebloggeraboutCakePHPissuesandsolutions

Germany(Berlin)PassionatePHPandOpenSourceDeveloper

WhatisAJAXWhentouseitBasicsUsingGETUsingPOSTMoreexamplesTips

Loadthewholepageonce.

Thenfetchonlypartsortinysnippetsofupdatesviafollow-uprequests.

Onlyneedsafractionoftheresource/bandwith.

DataexchangewithoutchangingpositionInlineeditingRealtimevalidationNativelookandfeelPre-fetchingDatalookups...

SEO/CrawlingBrowserHistoryBookmarkingNetworkissuesPollingSameOriginPolicy

GETrequestsshouldbeusedonlytoretrievedata

/controller/actiontext/html

/controller/action.jsonapplication/json

URLshouldmatchtheexpectedformat

//Config/routes.php

Router::parseExtensions();Router::setExtensions(array('json','xml','csv','rss','pdf'));

//AppController.php

public$components=array('RequestHandler');

if($this->request->is(array('ajax'))){}

$this->request->allowMethod('ajax');

/***AJAXactiontogetfavorites**@returnstring*/publicfunctionfavorites(){$this->autoRender=false;//Wedon'trenderaviewinthisexample$this->request->allowMethod(array('ajax'));//NodirectaccessviabrowserURL$data=array('content'=>...,'error'=>'',);$this->response->body(json_encode($data));}

GET/controller_name/favorites.json

/***AJAXactiontogetfavorites**@returnvoid*/publicfunctionfavorites(){$this->request->allowMethod(array('ajax'));//NodirectaccessviabrowserURL$data=array('content'=>...,'error'=>'',);$this->set(compact('data'));//Pass$datatotheview$this->set('_serialize','data');//LettheJsonViewclassknowwhatvariabletouse}

<p><buttonclass="ajax-button"data-url="<?phpecho$this->Html->url(array('action'=>'favorites','ext'=>'json'))?>">Clickme</button></p>

<p>Result:<spanid="target"></span></p>

$(function(){$('.ajax-button').click(function(e){vartargeturl=$(this).data('url');$.ajax({type:"get",url:targeturl,beforeSend:function(xhr){xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');},success:function(res){if(res.error!=''){alert(res.error);}else{$('#target').html(res.content);}},error:function(e){alert("FehlerbeiderAnfrage!");console.log(e);}});});});

$_ENV['HTTP_X_REQUESTED_WITH']='XMLHttpRequest';$url=Router::url(array('controller'=>'controller_name','action'=>'favorites','ext'=>'json','?'=>array('id'=>2)));$options=array('return'=>'vars');$result=$this->testAction($url,$options);...

Makessure$this->request->allowMethod(array('ajax'));passes

...data:{'one':$('#one').val(),'two':$('#two').val()},...

$one=$this->request->data('one');$two=$this->request->data('two');

$_ENV['HTTP_X_REQUESTED_WITH']='XMLHttpRequest';$url=Router::url(array('controller'=>'controller_name','action'=>'favorites','ext'=>'json','?'=>array('id'=>2)));$options=array('data'=>array(...),'method'=>'post''return'=>'vars');$result=$this->testAction($url,$options);...

'data'arraywithmethodtype'post'

ToggleAutocompleteChaineddropdownsPagination

//AppController.php-e.g.inbeforeRender()

if($this->request->is('ajax')){$this->response->disableCache();}

Questions?

http://book.cakephp.orghttps://github.com/dereuromark/cakefest2014-apphttp://sandbox.dereuromark.de/sandbox/ajax_exampleshttp://sandbox.dereuromark.de/sandbox/jquery_examples/autocompletehttp://www.dereuromark.de/2014/01/09/ajax-and-cakephp/https://github.com/dereuromark/tools