如何在发送表单(蛋糕方式)后重新加载元素的内容而不刷新页面？

Question

我有一个元素(注释列表和表单),在我的应用程序的许多地方使用.它工作得很好,花花公子,除了它需要刷新整个页面.这可能会有问题,特别是当它重置您的评论所属的游戏时,会导致所有进展失败.我对AJAX的经验非常有限,那么用添加的注释重新加载元素的最有效,最简单的方法是什么？

这是我的元素:

<?php
/*
set variables:
$data : data of the parent
$type : the type of the parent
$name : (optional)unique name to avoid naming conflicts
*/
if(!isset($name)) {
$name = 0;
}
foreach($data['Comment'] as $comment){
    echo '<div class="comment">'.$comment['content'].
        ' - '.$this->Html->link($comment['User']['username'],array('controller'=>'users','action'=>'view',$comment['User']['id']))
        .'</div>';
}
echo $this->Form->create(null, array('url' => '/comments/add','id'=>'qCommentForm'));
echo $this->Html->link('Leave comment','javascript:toggleDisplay("comment'.$name.'")');
echo '<br><div id="comment'.$name.'" style="display:none;">';
echo $this->Form->input('Comment.parent_id', array('type'=>'hidden','value'=>$data[$type]['id']));
echo $this->Form->input('Comment.parent_type', array('type'=>'hidden','value'=>$type));
echo $this->Form->textarea('Comment.content',array('div'=>'false','class'=>'small','label'=>false));
echo $this->Form->submit(__('Leave comment'),array('div'=>'false','class'=>'small'));
echo '</div>';
echo $this->Form->end();
?>

更新

好的,所以我更了解ajax,感谢您的帖子,但我仍然不明白如何做到这一点的"蛋糕方式".

Answer 1

使用这样的HTML:

<div id="comments">
    <!-- list of comments here -->
</div>

<form method="post" action="/comments/add" id="qCommentForm">
    <textarea name="Comment.content"></textarea>
    <input type="submit" value="Leave comment">
</form>

您可以使用JavaScript(在本例中为jQuery)拦截submit事件并使用Ajax发送注释数据(假设PHP表单处理程序返回新注释的HTML片段):

// run on document ready
$(function () {
    // find the comment form and add a submit event handler
    $('#qCommentForm').submit(function (e) {
        var form = $(this);

        // stop the browser from submitting the form
        e.preventDefault();

        // you can show a "Submitting..." message / loading "spinner" graphic, etc. here

        // do an Ajax POST
        $.post(form.prop('action'), form.serialize(), function (data) {
            // append the HTML fragment returned by the PHP form handler to the comments element
            $('#comments').append(data);
        });
    });
});

如果PHP表单处理程序返回整个注释列表(作为HTML)而不是新的注释,则可以使用.html()而不是.append():

$('#comments').html(data);

您可以在http://docs.jquery.com/找到jQuery文档.

更新:我不是CakePHP专家,而是"蛋糕方式"AFAICT:

1. 设置JsHelper:

   1. 下载首选的JavaScript库

   2. 在视图/布局中包含库,例如

      echo $this->Html->script('jquery');
      

   3. 在视图/布局中编写JsHelper缓冲区,例如

      echo $this->Js->writeBuffer();
      

   4. 在控制器中包含JsHelper,例如

      public $helpers = array('Js' => array('Jquery'));
      

2. 使用JsHelper::submit()而不是FormHelper::submit()生成将执行Ajax表单提交的提交按钮,例如

   echo $this->Js->submit('Leave comment', array('update' => '#comments'));
   

3. 在您的控制器中,检测请求是否是Ajax请求,如果是,则使用Ajax布局进行渲染,例如

   if ($this->request->is('ajax')) {
       $this->render('comments', 'ajax');
   }
   

不知道是否/如何RequestHandlerComponent形成这个数字.