Symfony2,创建ajax请求
问题描述:
我已经创建了一个动作,他的作用是根据选定的选项按顺序显示数据。Symfony2,创建ajax请求
这是树枝页:list.html.twig
<script type="text/javascript">
function sendForm() {
var sort_list = document.getElementById("sort_list").value;
if (sort_list) { // if is OK
document.getElementById("myForm").submit(); // submit form
}
}
</script>
<!-- sorting, pages -->
<form action="" method="post" class="form_sort" id="myForm">
<span class="manage_title">Sort by:</span>
<select class="select_styled white_select" id="sort_list" name="orderBy" onChange="sendForm();">
<option value="country:asc">Country A-Z</option>
<option value="country:desc">Country Z-A</option>
<option value="destination:asc">City A-Z</option>
<option value="destination:desc">City Z-A</option>
</select>
</form>
{% for travel in listTravels %}
<div class="re-item">
<div class="re-image">
<a href="{{ path('frontend_view', {'slug': travel.slug}) }}"><img src="{{ asset(travel.image.webPath) }}" alt="{{ travel.slug }}" /><span class="caption">View Details</span></a>
</div>
//***********
</div>
{% endfor %}
,这是在控制器的动作
public function listAction($page, Request $request)
{
$em = $this->getDoctrine()->getManager();
$nbByPage = $this->container->getParameter('travel.number_by_page');
$orderBy = "id:desc"; // set default order
if ($request->getMethod() == 'POST')
{
if(isset($_POST['orderBy']))
{
$orderBy = $_POST['orderBy'];
}
}
$listTravels = $em->getRepository('ProjectTravelBundle:Travel')->getListTravelsFrontend($nbByPage, $page, $orderBy);
return $this->render('ProjectFrontendBundle:Frontend:list.html.twig',
array(
'listTravels' => $listTravels,
'page' => $page,
'nb_page' => ceil(count($listTravels)/$nbByPage) ?: 1
));
}
此代码的作品,但它每次重新加载页面当用户选择一个选择的时候,你能帮我用ajax做这个动作吗?
这是路线:
frontend_list:
path: /travels
defaults: { _controller: ProjectFrontendBundle:Frontend:list }
另一个问题是,我应该创建另一个路线,并添加参数“命令”或使用相同的路线?
答
所以我会尝试这样的事:
嫩枝
<script type="text/javascript">
function refresh() {
$.ajax({
type: "POST",
url: Routing.generate('frontend_list'), // If you're not using FOSJsRoutingBundle,
// just use the path here
data: { orderBy: $('#orderBy').val() }
})
.done(function(data) {
// Just parse your data here and put it in your HTML
});
}
</script>
<!-- sorting, pages -->
<form action="" method="post" class="form_sort" id="myForm">
<span class="manage_title">Sort by:</span>
<select class="select_styled white_select" id="sort_list" name="orderBy" onChange="refresh();">
<option value="country:asc">Country A-Z</option>
<option value="country:desc">Country Z-A</option>
<option value="destination:asc">City A-Z</option>
<option value="destination:desc">City Z-A</option>
</select>
</form>
{% for travel in listTravels %}
<div class="re-item">
<div class="re-image">
<a href="{{ path('frontend_view', {'slug': travel.slug}) }}"><img src="{{ asset(travel.image.webPath) }}" alt="{{ travel.slug }}" /><span class="caption">View Details</span></a>
</div>
</div>
{% endfor %}
在这里,我用jQuery来执行一个Ajax请求该会得到来自服务器的JSON响应,你必须解析和格式化该响应才能在页面上正确显示。 Ajax请求的目标网址可以是绝对网址,但我建议您使用FOSJsRoutingBundle。
PHP
<?php
public function listAction($page) {
$em = $this->getDoctrine()->getManager();
$request = $this->getRequest();
$nbByPage = $this->container->getParameter('travel.number_by_page');
$orderBy = "id:desc"; // set default order
if ($request->getMethod() === 'POST' && isset($request->request->get('orderBy'))) {
$orderBy = $request->request->get('orderBy');
}
$listTravels = $em->getRepository('ProjectTravelBundle:Travel')->getListTravelsFrontend($nbByPage, $page, $orderBy);
if ($request->getMethod() === 'POST') {
return json_encode($listTravels); // If the request was sent by Ajax, just JSON encode the data and return it
}
return $this->render('ProjectFrontendBundle:Frontend:list.html.twig',
array(
'listTravels' => $listTravels,
'page' => $page,
'nb_page' => ceil(count($listTravels)/$nbByPage) ?: 1
));
}
这是非常像你一样,但如果请求的类型是POST,那么你可以只返回数据,并让使用Javascript处理它的客户端一样的东西。
我没测试我的代码,我只是想告诉你的大图片。你可能不得不做一些调整,以适应你的需求。 关于您的路线问题,它应该包含order
参数或不是由您决定。我想这会让分享搜索结果更容易。
您的Ajax请求在哪里? – paulgv 2014-11-23 16:11:43