在Ajax调用之后重新加载特定的控制器

Question

我在模板中嵌入了一个控制器：

{% render "AcmeUserBundle:User:showUsersList"} %}

<a onClick="changeStatus({{user.getUserId()}})"

目标很简单：

• 用户点击通过ajax更新状态的链接（这很好）
• 仅重新加载嵌入式控制器，而不是整个页面！

目前，我设法通过使用document.location.reload(true);重新加载整个页面来实现这一点。到目前为止，这没有任何意义......

这是ajax部分：

//...
function changeStatus(userId){
    $.ajax({
        type: "POST",
        url: ajaxControllerPath,
        data: "userId="+userId,
        success: function(){
            document.location.reload(true); 
        }
    });  
}

您将如何重新加载嵌入式控制器？

Answer 1

到目前为止这是有效的：

将控制器嵌入div：

<div id="block1">
    <a onClick="changeStatus({{user.getUserId()}})"
</div>

在ajax调用结束时使用javascript重新加载控制器

$('#block1').load("{{ path('show_users_list') }}");

有没有人有更好的建议？

Answer 2

当你调用ajax控制器时，这个控制器可以呈现showUsersList模板并将生成的html作为json对象返回：

$answer['html'] = $this->forward('AcmeUserBundle:User:showUsersList')->getContent(); 
$response = new Response();                                                
$response->headers->set('Content-type', 'application/json; charset=utf-8');
$response->setContent(json_encode($answer));
return $response

然后在你的javascript中使用这个生成的html来替换页面控制器部分的内容（使用div或类似的来识别它）

<div id="changethis">{% render "AcmeUserBundle:User:showUsersList"} %}</div>

function changeStatus(userId){
    $.ajax({
        type: "POST",
        url: ajaxControllerPath,
        data: "userId="+userId,
        success: function(returnData){
            $('#changethis').html(returnData['html']);
        }
    });  
}