我的控制器中有一个用于索引路径的操作
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
,模板将被渲染到我的索引模板
我做错了什么?
感谢。
答案 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路由