使用ajax将模板渲染到Symfony2中

发布时间：2020-12-15 22:54:57 所属栏目：百科来源：网络整理

导读：我的控制器中有一个用于索引路径的动作使用routing.yml index:pattern: /indexdefaults: { _controller:AcmeDemoBundle:Default:index } 控制器用于此路径 public function indexAction(){ return $this-render('AcmeDemoBundle:Plugin:index.html.twig');}

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

使用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" 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并且模板将被渲染到我的索引模板中

我究竟做错了什么？

谢谢.

解决方法

首先,就我所知,你的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);
});

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

之后,您只需添加< div id =“your_div”>< / div>在您希望呈现模板的位置.这对我来说很完美.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!