javascript - Yii框架: get the resultant html from a view in JavaScript

Question

这是一种特殊的情况，但我在 yii 应用程序中有一个简单的 .php View ，它根据传递给它的参数显示一些 html。我这样调用它:

echo $this->renderPartial('/comments/view', array('comment'=>$comment));

我多次执行此操作，因为页面中可能有多个评论。

这工作正常，但是，一旦有人发布新评论，我想在页面上动态显示它而不重新加载它。因此，AJAX 发挥了它的魔力，并在完成后调用刷新函数，该函数需要刷新显示评论的 div 内容:

    function refreshComments()
    {
        var content = $('#users_posts').html();
        var newContent = "<?php $this->renderPartial('/comments/view', array('comment'=>Comments::getLatestComment($model->id))); ?>";
        $('#users_posts').html(newContent + content);
    }

显然，我尝试用所需的 html 填充变量 newContent 的部分失败了。这部分工作没有问题:

Comments::getLatestComment($model->id)

因为我能够从数据库中新插入的评论中获取信息。问题是显示在屏幕上，因为我必须用大量 html 包裹它，这也取决于 getLatestComment 返回的值。 View 做得很好，但是，我如何从中获取结果并将其填充到 JavaScript 变量中，以便我可以正确更新 div 的 HTML？

或者以及其他以这种方式提出的建议也非常受欢迎!

Answer 1

实现您想要做的事情的方法很少。

第一种方法是更正您现有的代码，如下所示:-

评论 Controller :-

public function actionGetLatestComments($id){ //$id variable is the ID of the latest comment on the page
    if(isset($_POST['post_id'])){
        $post_id = $_POST['post_id'];
        $post = Post::model()->findByPk($post_id);
        if($post){
            //check for any new comments here using the $id variable passed
            //echo out all the HTML of new comment(s) here
        }
    }
}

用户 View 端:-

这一边，您需要跟踪您的帖子下的所有评论，例如。

<div id='users_posts'>
    <div id='2'>
        ...comment with ID 2...
    </div>
    <div id='1'>
        ...comment with ID 1...
    </div>
</div>

假设您的最新评论是评论列表中的第一条评论，您可以通过以下 JS 获取它的 ID :-

$('#users_post div').first().attr('id');

在JS函数refreshComments()中使用这个ID，如下所示:-

function refreshComments(){
    var id = $('#users_post div').last().attr('id');
    $.post('/comments/getLatestComments/'+id, {post_id:POST_ID_HERE}, function(data){
        $('#users_posts').append(data);
    });
}

使用此方法会增加服务器的费用，因为如果有新评论，您的服务器将一次又一次返回整个 HTML。

或者您可以使用 JSON 数据来减少每个请求的开销，如下所示:-

评论 Controller :-

//inside the getLatestComments function
echo CJSON::encode(array(/* here array of new comments if available */));

在用户的 View 端:-

//inside refreshComments function 
var id = $('#users_post div').first().attr('id');
$.post('/comments/getLatestComments/'+id, {post_id:POST_ID_HERE}, function(data){
    data = JSON.parse(data);
    $.each(data, function(id, value){
        $('#users_post').append("<div id='"+value.id+"'>"+value.comment+"</div>");
    });
});

这样你就可以使用 JSON 来获取所有最新评论并提高效率。

希望这能解决您的问题。