CakePHP中的ajax还是比较简单,但要注意一些细节。

app/View/Layouts下新建ajaxtest.ctp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CakePHP AJAX Demo :: <?php echo $title_for_layout?></title>
<?php echo $this->Html->charset(); ?>
<?php echo $this->Html->script('jquery-1.9.1.min'); ?>
</head>
<body>
<div id="container">
<center><h2>CakePHP AJAX Demo</h2></center>
<div id="content"><?php echo $content_for_layout?></div>
<?php
$options = array(
'inline'=>true,
'cache'=>false,
'safe' =>false
);
echo $this->Js->writeBuffer($options);
?>
</div>
</body>
</html>

要注意一定要带上 echo $this->Js->writeBuffer($options); 即输出js。

有关writeBuffer(),自己从官方文档翻译的

php:method:: writeBuffer($options = array())

将所有产生的Javascript写入到代码块中或缓存在文件中,并返回一个带链接的脚本

**选项**

- ``inline`` - (默认为真)若为真,直接在页面内输出缓存内容,若``cache``同样为真,将只产生一个带地址的script标签
- ``cache`` - (默认为假)若为真,将缓存内容保存到一个独立的js文件中,并被页面引用(译者:建议缓存内容过多时使用)
- ``clear`` - (默认为真)若为假,将阻止缓存内容被清除
- ``onDomReady`` - (默认为真)若为真,将缓存内容放到domready事件中(译者:即脚本被自动包含在$(document).ready(function ())中)
- ``safe`` - (默认为真)若为真,页面内的缓存内容被<![CDATA[ ... ]]>语句块包裹

独立出来的js缓存文件在``webroot/js``,要保证该目录可写,并且保证浏览器可以生成任何页面的脚本资源缓存

app/Controller/Layouts下新建AjaxtestController.php

<?php
class AjaxtestController extends AppController {
var $layout = 'ajaxtest'; //指定视图使用的布局为 ajaxtest
var $helpers = array('Html','Js'); //需要用到的视图辅助类 function index(){
} function hello(){
sleep(1); //本地测试时,为了更好地看到效果,模拟延迟状态
$this->layout = 'ajax'; //此方法为 AJAX 动作,所以布局需要使用 hello.ctp
}
}

app/View/下先新建Ajaxtest目录并新建index.ctp

<div id="loading" style="display:none;padding:4px;color:black;
background-color:#FAD163;width:100px"><strong>Loading...</strong></div>
<div id="view" style="display:none;background-color:#E8EEF7;
padding:4px;border:1px solid silver;width:300px"></div>
<?php
//设置 AJAX 选项
$options = array(
'update' => '#view',
'beforeSend' => "$('#view').hide();$('#loading').show();",
'complete' => "$('#loading').hide();$('#view').show();"
);
//使用 AjaxHelper 创建 AJAX 动作链接
echo $this->Js->link('Click here!', '/ajaxtest/hello', $options);
?>

再新建一个hello.ctp,ajax加载的内容

<center>Hello, AJAX world!</center>

运行http://localhost/Mycakephp/ajaxtest ,效果是有个超链接文字是'Click here!',但点击链接,内容即hello.ctp通过ajax方法加载进来了。

cakephp2.x 一个ajax例子.md的更多相关文章

  1. 一个jquery ajax例子

    上次搞了个jquery的AutoComplete效果,感觉很久没写jquery了,趁热打铁,再找点东西练练手.这不,看了一下jquery手册,顺便写了一个小例子,源码我直接贴上来了.   1.新建一个 ...

  2. Javascript:来一个AJAX封装函数

    前不久换工作了,最近一直在出差,忙得跟狗一样,所以博客都荒废许久了. 最近的工作中涉及到大量的ajax操作,本来该后台做的事也要我来做了.而现在使用的ajax函数是一个后台人员封装的—-但他又是基于 ...

  3. 为大家分享一个 Ajax Loading —— spin.js

    我们在做Ajax 异步请求的时候,一般都会利用一个动态的 Gif 小图片来制作一个Ajax Loading ,以便增加用户体验. 今天在网上发现了一个 Spin.js ,该 js 脚本压缩后5k,可以 ...

  4. 01-常见Dos命令、Java历史、Java跨平台、配置Path环境变量、第一个HelloWorld例子

    常见Dos命令 dir: 列出当前目录下的文件以及文件夹 md: 创建目录 rd: 删除目录 cd: 进入指定目录 del: 删除文件 copy: 复制文件 xcopy: 复制目录 tree: 列出目 ...

  5. SQL Server Reporting Service(SSRS) 第一篇 我的第一个SSRS例子

    很早就知道SQL SERVER自带的报表工具SSRS,但一直没有用过,最近终于需要在工作中一展身手了,于是我特地按照自己的理解做了以下总结: 1. 安装软件结构 SSRS全称SQL Server Re ...

  6. Ajax例子,views返回,html接收数据

    Ajax例子,views返回,html接收数据 views from django.shortcuts import render,HttpResponse,render_to_response im ...

  7. 写一个ajax程序就是如此简单

    写一个ajax程序就是如此简单 ajax介绍: 1:AJAX全称为Asynchronous JavaScript and XML(异步JavaScript和XML),指一种创建交互式网页应用的网页开发 ...

  8. 一个简单例子:贫血模型or领域模型

    转:一个简单例子:贫血模型or领域模型 贫血模型 我们首先用贫血模型来实现.所谓贫血模型就是模型对象之间存在完整的关联(可能存在多余的关联),但是对象除了get和set方外外几乎就没有其它的方法,整个 ...

  9. 为大家分享一个 Ajax Loading —— spin.js(转)

    原文地址:http://www.cnblogs.com/lxblog/p/3425599.html 我们在做Ajax 异步请求的时候,一般都会利用一个动态的 Gif 小图片来制作一个Ajax Load ...

随机推荐

  1. Educational Codeforces Round 55 (Rated for Div. 2) C. Multi-Subject Competition 【vector 预处理优化】

    传送门:http://codeforces.com/contest/1082/problem/C C. Multi-Subject Competition time limit per test 2 ...

  2. PAT——1064. 朋友数(set用法)

    如果两个整数各位数字的和是一样的,则被称为是“朋友数”,而那个公共的和就是它们的“朋友证号”.例如123和51就是朋友数,因为1+2+3 = 5+1 = 6,而6就是它们的朋友证号.给定一些整数,要求 ...

  3. px,rem,em的区别

    PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  4. Nodejs与mysql连接池的应用(pool)

    /* * 连接池 连接和缓存的技术 * */ var mysql = require('mysql'); var pool = mysql.createPool({ connectionLimit:2 ...

  5. 提示AttributeError: 'module' object has no attribute 'HTTPSHandler'解决方法

    今天在新机器上安装sqlmap,运行提示AttributeError: 'module' object has no attribute 'HTTPSHandler' 网上找了找资料,发现一篇文章ht ...

  6. LeetCode27.移除元素 JavaScript

    给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成 ...

  7. 一点一点看JDK源码(二)java.util.List

    一点一点看JDK源码(二)java.util.List liuyuhang原创,未经允许进制转载 本文举例使用的是JDK8的API 目录:一点一点看JDK源码(〇) 1.综述 List译为表,一览表, ...

  8. mvc 页面 去掉转义字符

    mvc 页面 去掉转义字符   mvc 后台返回json数据,用ViewBag 传回前台页面,但是传到前台页面的时候,带有转义字符.一直想去掉这个转义字符,苦恼了好久. 解决方案: mvc 页面有个这 ...

  9. 【JavaWeb】从零实现用户登录

    1.数据库预备 1.1 SQL 创建数据库 create database db; 创建表 create table userInfo( id int primary key , name ), pa ...

  10. tomcat搭建https服务(非自签发)

    平时做自己的web demo基本上都是用http协议进行访问. 但是正式情况基本上都是https进行访问,所以掌握https的配置是很关键的. 需要准备的材料: 一台可以可以外网访问的远程服务器 to ...