CakePHP and AJAX

6b6225db96d6fb4a34c6d50a9171d13f?s=47 Mark Sch.
August 23, 2014

CakePHP and AJAX

CakePHP and AJAX - Talk at CakeFest Conference in Madrid 2014

6b6225db96d6fb4a34c6d50a9171d13f?s=128

Mark Sch.

August 23, 2014
Tweet

Transcript

  1. CakeFest Conference 2014 - Mark Scherer (@dereuromark)

  2. Using CakePHP for 6+ years (starting with 1.2) Core Developer

    since 2+ years Active blogger about CakePHP issues and solutions Germany (Berlin) Passionate PHP and Open Source Developer
  3. What is AJAX When to use it Basics Using GET

    Using POST More examples Tips
  4. None
  5. Load the whole page once. Then fetch only parts or

    tiny snippets of updates via follow-up requests. Only needs a fraction of the resource/bandwith.
  6. Data exchange without changing position Inline editing Real time validation

    Native look and feel Pre-fetching Data lookups ...
  7. SEO / Crawling Browser History Bookmarking Network issues Polling Same

    Origin Policy
  8. GET requests should be used only to retrieve data

  9. /controller/action text/html /controller/action.json application/json URL should match the expected format

  10. // Config/routes.php Router::parseExtensions(); Router::setExtensions(array('json', 'xml', 'csv', 'rss', 'pdf')); // AppController.php

    public $components = array('RequestHandler');
  11. if ($this->request->is(array('ajax'))) {} $this->request->allowMethod('ajax');

  12. /** * AJAX action to get favorites * * @return

    string */ public function favorites() { $this->autoRender = false; // We don't render a view in this example $this->request->allowMethod(array('ajax')); // No direct access via browser URL $data = array( 'content' => ..., 'error' => '', ); $this->response->body(json_encode($data)); } GET /controller_name/favorites.json
  13. /** * AJAX action to get favorites * * @return

    void */ public function favorites() { $this->request->allowMethod(array('ajax')); // No direct access via browser URL $data = array( 'content' => ..., 'error' => '', ); $this->set(compact('data')); // Pass $data to the view $this->set('_serialize', 'data'); // Let the JsonView class know what variable to use }
  14. <p> <button class="ajax-button" data-url="<?php echo $this->Html->url(array('action' => 'favorites', 'ext' =>

    'json'))?>"> Click me </button> </p> <p> Result: <span id="target"></span> </p>
  15. $(function() { $('.ajax-button').click(function(e) { var targeturl = $(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("Fehler bei der Anfrage!"); console.log(e); } }); }); });
  16. $_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); ... Makes sure $this->request->allowMethod(array('ajax')); passes
  17. ... data: {'one' : $('#one').val(), 'two' : $('#two').val()}, ... $one

    = $this->request->data('one'); $two = $this->request->data('two');
  18. $_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' array with method type 'post'
  19. Toggle Autocomplete Chained dropdowns Pagination

  20. // AppController.php - e.g. in beforeRender() if ($this->request->is('ajax')) { $this->response->disableCache();

    }
  21. Questions?

  22. http://book.cakephp.org https://github.com/dereuromark/cakefest2014-app http://sandbox.dereuromark.de/sandbox/ajax_examples http://sandbox.dereuromark.de/sandbox/jquery_examples/ autocomplete http://www.dereuromark.de/2014/01/09/ajax-and- cakephp/ https://github.com/dereuromark/tools