• About Me




    Lily@Melbourne, Australia

    Login

  • Follow 静水深流 || Still waters run deep on WordPress.com
  • Archives

CakePHP submit a form with JS

很久没有摸CakePHP,接到要求做一个用ajax提交的表单。在网上搜了好几页,但无论效果、解释,时效(CakePHP升级几代了)都不太如意。譬如这个耗时接近1个小时的视频,如果表格字段为空,页面返回的是两张空白表格,结果适得其反。

在代码测试多次后,终于达到目的,其实步骤挺简单,我会一步步讲清楚。

  • 下载jquery, 安装到webroot/js下,文件名任意,但要和第二步中一致。
  • 在layout/default.ctp 或表单的所在的如view/Posts/add.ctp加入以下两条echo语句。

echo $this->Html->script(‘jquery‘); //jquery,指下载所得的文件名。
echo $this->Js->writeBuffer(array(‘cache’=>TRUE));

/*两者区别在于前者jquery.js和buffer(default.ctp)会作用于整个网站,
*而后者只作用例子中的add.ctp。
*/

  • 在add.ctp的表格下,一般习惯在文件尾:

<?php
$data = $this->Js->get(‘#PostAddForm’)->serializeForm(array(‘isForm’ => true, ‘inline’ => true));
$this->Js->get(‘#PostAddForm‘)->event( //该表格的id名
‘submit’,
$this->Js->request(
array(‘action’ => ‘add’, ‘controller’ => ‘posts’),
array(‘method’ => ‘POST’, ‘async’ => true, ‘data’ => $data, ‘update’ => ‘#extra‘,
‘dataExpression’=>true)
)
);
?>

/* #extra是div名,可以是在add.ctp里,
* 也可以是在layout/default.ctp中,假定add.ctp是使用default.ctp作为layout.
*/

  • 在PostsController.php中加入如下语句。

class PostsController extends AppController {

public $helpers = array( ‘Js‘ );
public $components = array(‘RequestHandler‘);

/add function中

if ($this->Post->save($this->request->data)) {

if ($this->RequestHandler->isAjax()) { //如果是ajax call

$this->render(‘/Elements/latestposts’);

/* 这里结果发送到一个elements,
* 也可以用这个语句$this->render(‘extra’,ajax); 表明使用ajax的layout。
*/

总结:

还有很多可视化效果,如fadein,fadeout,但我想这些都可以自学,而首要任务是完成功能。做好之后觉得挺简单因为并不需要强大的逻辑复杂的计算,只需修改三个文件少量且一目了然的代码。可是很遗憾网上却没有现成的,也许是没有用对关键字吧。还有一个不幸得消息,CakePHP3.0后不再包括JsHelper。

 

 

Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: