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：

Set up JsHelper：
1. 下载首选的JavaScript库
2. 在视图/布局中包含库，例如
```
echo $this->Html->script('jquery');
```
3. 在视图/布局中编写JsHelper缓冲区，例如
```
echo $this->Js->writeBuffer();
```
4. 在控制器中包含JsHelper，例如
```
public $helpers = array('Js' => array('Jquery'));
```
使用JsHelper::submit()代替FormHelper::submit()生成提交Ajax表单的提交按钮，例如
```
echo $this->Js->submit('Leave comment', array('update' => '#comments'));
```
在您的控制器中，检测请求是否是Ajax请求，如果是，则使用Ajax布局进行渲染，例如
```
if ($this->request->is('ajax')) {
    $this->render('comments', 'ajax');
}
```

不确定RequestHandlerComponent是否/如何形成这一点。

Answer 2

我不确定cakePHP，但总的来说，这就是我在自定义应用程序中的做法。

创建一个普通的HTML表单元素并设置所有输入。
将事件侦听器（javascript）绑定到此表单以捕获提交事件。这可以通过各种方式完成，我使用jQuery库，因为它易于使用，尤其是对于ajax请求。您可以观看提交按钮并收听点击事件或观看表单并收听提交事件。
如果事件被触发，则需要返回false，因此表单未真正提交。而是收集表单数据（form.serialize()）并通过ajax请求将数据发送到服务器上的某个PHP脚本。
脚本处理请求并将答案（HTML代码）发送回客户端的浏览器。
使用jQuery或自定义javascript根据需要将返回的HTML注入任何DOM元素。例如。您可以使用新的HTML替换表单。
注意：许多PHP框架都有用于处理ajax请求的特殊控制器，cakePHP也可能。这意味着，您需要两个控制器以及两个视图才能在框架模式中工作。

Answer 3

我不知道PHP但是使用Jsp和js，我会在一个元素上放一个动作来调用js，并在那里像var element = document.getElementById（）..然后element.innerHTML =“new value” 对不起，如果在ypur情况下不可能

Answer 4

这是一个逐步指导，以获得您想要实现的目标。

首先，您需要获取要动态更新的代码的所有部分，并为其提供唯一ID。 id可以在不同的页面上相同，只要id在某个页面上只存在一次。
```
<div id="comments"></div>
```

接下来，您需要构建一个ajax请求，以便从您的表单发布评论。假设您有以下注释textarea（ajax请求不需要<form>）：

<textarea name="comment" id="add_comment"></textarea>

你会做一个类似这样的ajax请求：

function refreshComments() {
    var comment = encodeURIComponent(document.getElementById('add_comment').value);
    var xmlhttp;

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }
    else {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById('comments').innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("POST","add_comment.php?comment=" + comment, true);
    xmlhttp.send();
}

现在将submit按钮更改为以下内容：

<input type="button" name="addComment" value="Add Comment" onClick="refreshComments();" />
现在在PHP中，您需要处理添加评论的请求，然后您需要回复该特定页面的所有评论。（这将允许用户查看在闲置时从其他用户发布的任何评论。）您所要做的就是将评论回显到ajax页面（示例中的add_comment.php）。

这是一个你可以玩的小提琴，看看它是如何运作的一般概念：http://jsfiddle.net/xbrCk/

Answer 5

以前的答案包括ajax示例代码。一种有效的方法是使您的PHP代码返回一个javascript变量UID，其中包含您的代码加载的最后一条消息的uid，并包含一个空div（即）。然后，不是通常使用所有消息的innerHTML来播放，您的ajax调用结果可以在该div之前插入，并且还将新值设置为变量UID。此外，您可以在任何所需的时间间隔内使用此变量轮询服务器以获取新注释。

Answer 6

这是我的一步一步：
1.首先使用表单创建一个html文件，表单如下所示：

<body>
<div id="comment-list"></div>
<form id="form">
<textarea name="comment"></textarea>           
<input type="button" value="Submit Comment" id="submitcomments">
</form>
</body>

2。然后像这样调用jquery库：

 <script language="javascript"  src="<js directory>/jquery-1.7.2.js">/script>

您可以在此处获取jquery：http://api.jquery.com
3.然后像这样创建一个jquery ajax：

<script>
$(document).ready(function()
{
        $("#submitcomments").click(function(){  //upon clicking of the button do an ajax post 
              var serializedata = $("#form").serialize(); //serialize the all fields inside the form
              $.ajax({
                     type: 'POST',
                     url: 'filename.php', //some php file returning the comment list
                     data: serializedata,// data that will be posted on php files
                     success: function(data)
                     {
                     $("#comment-list").append(data);  //now if the ajax post was success append the data came from php to the comment-list container in the html
                     }                                   
                  });
          });
});  
</script>

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

更新

6 个答案: