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參數或不是由您決定。我想這會讓分享搜索結果更容易。