1

我有一个元素（评论列表和表单）在我的应用程序的许多地方使用。它工作得很好而且很漂亮，除了它需要刷新整个页面。这可能会产生问题，尤其是当它重置您的评论所属的游戏时，会导致所有进度都悲惨地丢失。我对 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 有了更多的了解，但我仍然不明白如何以“蛋糕的方式”做到这一点。

4

6 回答 6

4

使用这样的 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. 设置 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计算到这一点。

于 2012-06-02T08:54:58.307 回答
1

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

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

这是我的一步一步：
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>
于 2012-06-05T06:27:50.383 回答
0

以前的答案包括 ajax 示例代码。一种有效的方法是让您的 php 代码返回一个带有您的代码加载的最后一条消息的 uid 的 javascript 变量 UID，并包含一个空的 div（即 ）。然后，您可以在该 div 之前插入您的 ajax 调用结果，并为变量 UID 设置一个新值，而不是一般地使用所有消息的 innerHTML。您还可以在任何所需的时间间隔使用此变量轮询您的服务器以获取新评论。

于 2012-06-04T05:46:44.710 回答
0

我不了解 PHP，但使用 Jsp 和 js，我会对元素执行操作以调用 js，并在其中执行类似 var element =document.getElementById().. then element.innerHTML= "new value" 的操作如果在 ypur 情况下这是不可能的

于 2012-06-01T15:11:08.490 回答
0

这是获得您想要实现的目标的分步指南。

  1. 首先，您需要获取要动态更新的代码的所有部分，并给它们一个唯一的 id。不同页面的 id 可以相同，只要该 id 在某个页面上只存在一次即可。

    <div id="comments"></div>

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

    <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();
}

  3. 现在将您的submit按钮更改为如下所示：

    <input type="button" name="addComment" value="Add Comment" onClick="refreshComments();" />

  4. 现在在 PHP 中，您需要处理添加评论的请求，然后您需要回复该特定页面的所有评论。（这将允许用户在空闲时查看其他用户发布的任何评论。）您所要做的就是将评论回显到 ajax 页面（示例中的 add_comment.php）。

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

于 2012-06-03T03:09:03.683 回答