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

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)拦截提交事件并使用 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. Set up JsHelper :

   1. 下载您喜欢的 JavaScript 库

   2. 在您的 View /布局中包含库，例如

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

   3. 在您的 View /布局中编写 JsHelper 缓冲区，例如

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

   4. 在您的 Controller 中包含 JsHelper，例如

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

2. 使用 JsHelper::submit()代替 FormHelper::submit() 生成一个提交按钮，该按钮将执行 Ajax 表单提交，例如

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

3. 在您的 Controller 中，检测请求是否为 Ajax 请求，如果是，则使用 Ajax 布局进行呈现，例如

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

不确定是否/如何 RequestHandlerComponent虽然这个数字。