使用ajax将模板渲染到Symfony2中

Question

我的控制器中有一个用于索引路径的动作

使用routing.yml

index:
pattern: /index
defaults: { _controller:AcmeDemoBundle:Default:index }

控制器用于此路径

public function indexAction()
{
    return $this->render('AcmeDemoBundle:Plugin:index.html.twig');
}

和index.html.twig模板

{% extends'::base.html.twig' %}

{% block stylesheets %}
    {% stylesheets filter='cssrewrite' output='css/*.css'
            'bundles/acmedemo/css/*'  %}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
    {% endstylesheets %}
    {% endblock stylesheets %}

{% block body %}
<br>
<div class="container">

<div class="wp_attachment_holder">

    <div class="imgedit-response" id="imgedit-response-8"></div>

    <div class="wp_attachment_image" id="media-head-8">
        <p id="thumbnail-head-8"><img class="thumbnail" src="http://localhost/wordpress/wp-content/uploads/2014/06/121-1024x583.jpeg" style="max-width:100%" alt=""></p>
        <p><a class="btn btn-sm btn-default" id="edik-wp-extended-edit">?????????????</a> <span class="spinner"></span></p>
    </div>
    <div style="display:none" class="image-editor" id="image-editor-8">
    </div>
</div>
<div id="output"></div>
<img class="thumbnail"  data-attach-id="8" data-src="http://localhost/wordpress/wp-content/uploads/2014/06/121-1024x583.jpeg" style="max-width:100%" alt="">
    <script>
            $('#edik-wp-extended-edit').click(function() {
                window.location= Routing.generate('ajax');
//                $('#output').load('/ajax/index');
            });
        </script>
    </div>
{% endblock %}`

单击按钮Редактировать时,我想加载另一个带有ajax的模板.

another.html.twig

<div>Hello</div>

使用routing.yml

ajax:
pattern: /ajax/index
defaults: { _controller :AcmeDemoBundle:Default:ajax }
options:
    expose: true

控制器用于此路径

public function ajaxAction()
{
    $template = $this->renderView('AcmeDemoBundle:Plugin:another.html.twig');
    return new Response($template);
}

但是当我点击按钮时,我的uri将是/ajax/index.我想要的是它留下来/index,模板将呈现到我的索引模板中

我究竟做错了什么？

谢谢.

Answer 1

首先,ajaxAction()就我所知,你应该有点不同,对我来说这有用:

    $template = $this->forward('AcmeDemoBundle:Plugin:another.html.twig')->getContent();

    $json = json_encode($template);
    $response = new Response($json, 200);
    $response->headers->set('Content-Type', 'application/json');
    return $response;

该forward()函数的作用是呈现模板并返回呈现的HTML代码.

在你的JavaScript文件中,你应该这样做

$.ajax({
    type: "POST",
    dataType: 'json',
    url: Routing.generate('ajax'),
    async: false //you won't need that if nothing in your following code is dependend of the result
})
.done(function(response){
    template = response;
    $('#your_div').html(template.html); //Change the html of the div with the id = "your_div"                        
})
.fail(function(jqXHR, textStatus, errorThrown){
    alert('Error : ' + errorThrown);
});

您对自己进行了AJAX调用ajaxAction,这将返回您要渲染的模板的HTML.

之后,您只需要<div id="your_div"></div>在要渲染模板的位置添加一个.这对我来说很完美.

要提到的是,您需要将ajax模板细分为应该显示的代码.