Cakephp1.2中JQuery和JSON的使用

最新推荐文章于 2025-12-28 13:38:54 发布

转载最新推荐文章于 2025-12-28 13:38:54 发布 · 1k 阅读

文章标签：

#cakephp #json #jquery #layout #components #扩展

php 专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何在CakePHP 1.2中使用JSON进行数据交换，包括配置路由、设置Content-type及创建JSON视图布局。

文章原文来自于 Eelco Wiersma 的文章《Using JSON in CakePHP 1.2》

参考文章

Using JSON in CakePHP 1.2

介绍 JSON

JQuery API 1.3

简介

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。Cakephp1.2提供了对JSON的内置支持,主要体现在两个特殊的方法:

Router::parseExtensions() 和 JavascriptHelper::object()

目标

我们要通过JQuery的$.getJSON方法,获取Cakephp服务端的JSON数据,URL可能是这个样子

1. http://localhost/posts/index.json

如何完成?

首先,要让Cakephp启用JSON的扩展名解析

编辑/config/routes.php,添加

   1. 
   Router::parseExtensions(’json’);   
  

然后,为JSON设置Content-type

编辑app_controller.php,添加

   1. 
   var $components =  array ( 'RequestHandler' );   
  
   2. 
   function beforeFilter() {   
  
   3. 
        $this ->RequestHandler->setContent( 'json' ,  'text/x-json' );   
  
   4. 
        parent::beforeFilter();   
  
   5. 
   }

RequestHandler的setContent方法,可以使json的扩展名使用特定的layout和视图,就像下面的代码

下面,为你的JSON数据创建一个layout

创建/layouts/json/default.ctp的代码

   1. 
   <?php   
  
   2. 
   header( "Pragma: no-cache" );   
  
   3. 
   header( "Cache-Control: no-store, no-cache, max-age=0, must-revalidate" );   
  
   4. 
   header( 'Content-Type: text/x-json' );   
  
   5. 
   header( "X-JSON: " . $content_for_layout );   
  
   6. 
      
   7. 
   echo $content_for_layout ;   
  
   8. 
   ?>

注意:

在使用RequestHandler的setContent方法后,Cakephp会自动解析json扩展名的访问并且会默认使用

/layouts/json/default.ctp解析json,如果不存在这个layout的话,会出现 未找到layout错误 .

x-json头可以被prototype.js将返回的数据自动解析为JSON对象

下面创建我们的JSON视图

创建/views/posts/json /index.ctp的代码 (注意加粗的部分 )

   1. 
   < ?php   
  
   2. 
   echo $javascript ->object( $aPosts );   
  
   3. 
   ?>

同样的json也有自己的视图文件,简单理解就是,在你的控制器视图下的json文件夹,建立同名的视图文件.

控制器中的代码

   1. 
   function index() {   
  
   2. 
        $this ->set( 'aPosts' ,  $this ->Post->findAll());   
  
   3. 
   }

在JQuery中使用

假如我们的返回值类似下面这样

   01. 
   Array   
  
   02. 
   (   
  
   03. 
        [0] => Array   
  
   04. 
            (   
  
   05. 
                [Post] => Array   
  
   06. 
                    (   
  
   07. 
                        [id] => 1   
  
   08. 
                        [user_id] => 54   
  
   09. 
                        [subject] => augue scelerisque mollis.   
  
   10. 
                        [body] => tristique senectus et netus et malesuada fames ac turpis egestas. Fusce aliquet magna   
  
   11. 
                        [created] => 2009-10-29 21:15:51   
  
   12. 
                    )   
  
   13. 
      
   14. 
            )   
  
   15. 
      
   16. 
        [1] => Array   
  
   17. 
            (   
  
   18. 
                [Post] => Array   
  
   19. 
                    (   
  
   20. 
                        [id] => 2   
  
   21. 
                        [user_id] => 81   
  
   22. 
                        [subject] => purus, in molestie tortor nibh   
  
   23. 
                        [body] => elit. Nulla facilisi. Sed neque. Sed eget lacus. Mauris non dui nec urna suscipit nonummy.   
  
   24. 
                        [created] => 2009-08-01 06:57:03   
  
   25. 
                    )   
  
   26. 
      
   27. 
            )   
  
   28. 
      
   29. 
   )

我们可以这样使用JSON数据

   1. 
   $.getJSON("http://localhost/posts/index.json ", function(json){   
  
   2. 
      alert(json[0].Post.subject);   
  
   3. 
      alert(json[1].Post.subject);   
  
   4. 
   });