Symfony2，创建ajax请求

Question

I have created an action his role is to display the data by an order according to the selected choice.

This is the twig page: 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 %}

and this is the action in the controller

    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
    ));
}

This code works but it reloads the page every time when user select a choice, can you help me do this action with ajax?

This is the route :

frontend_list:
path:     /travels
defaults: { _controller: ProjectFrontendBundle:Frontend:list }

Another question is should I create another route and add a parameter "order" or using the same route ?

Answer 1

So I would try something like this :

Twig

<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 %}

Here, I used jQuery to perform an Ajax request which is gonna get a JSON response from the server, you're gonna have to parse and format that response in order to show it properly on the page. Ajax request's target URL can be an absolute URL but I'd recommend using 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
    ));
}

This is pretty much the same thing as you did, except that if the request is of type POST, then you can just return the data and let Javascript handle it client-side.

I didn't test my code, I just wanted to show you the big picture. You're probably gonna have to make some adjustments so it fits your needs. Concerning your question about the route, wether it should contain an order parameter or not is up to you. I guess it would make it easier to share search results.