使用ajax将模板渲染到Symfony2中

时间:2014-06-27 07:20:50

标签: ajax symfony

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

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,模板将被渲染到我的索引模板

我做错了什么?

感谢。

2 个答案:

答案 0 :(得分:20)

首先,就我所知,你的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模板细分为应显示的代码。

答案 1 :(得分:-1)

请尝试生成像这样的ajax路线

window.location= '{{ path("ajax") }}';

添加了:

对于make ajax请求,将windows.location更改为ajax请求

$( "#output" ).load( '{{ path("ajax") }}', function() {
  alert('Load done');
});

添加了使用说明:

只有将它放在Twig模板上时,

js代码才有效。如果你把它放到js文件,它将无法正常工作。 如果是原始问题。

<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() {
            $( "#output" ).load('{{ path("ajax") }}');
      });
</script>

您可以使用类似FOSJsRoutingBundle的东西来正确使用js中的SF2路由