Symfony2，创建ajax请求

Question

我已经创建了一个动作，他的作用是根据选定的选项按顺序显示数据。

这是树枝页：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 } 

另一个问题是，我应该创建另一个路线，并添加参数“命令”或使用相同的路线？

Answer 1

所以我会尝试这样的事：

嫩枝

<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参数或不是由您决定。我想这会让分享搜索结果更容易。