Как добавить возможности Ajax для Symfony

У меня есть набор сеансов на странице, которую я хочу удалить с помощью AJAX. т.е. нажмите ссылку и без необходимости переходить на новую страницу, просто удалите сеанс и покажите сообщение об успешном завершении.

Теперь, согласно данному ответу ( который все еще не работал для меня ), у меня есть следующее:

контроллер

use Symfony\Component\HttpFoundation\JsonResponse; //.. public function ajaxRemoveSessionAction() { $session = $this->getRequest()->getSession(); $session->remove('name'); return new JsonResponse(array('success' => true)); } 

маршрутизации:

 ajax_remove_session: pattern: /remove-session defaults: { _controller: FooTestBundle:Page:ajaxRemoveSession } 

веточка:

 <a href="#" id="remove_session">Remove session</a> <script type="text/javascript"> $(document).ready(function() { $('#remove_session').click(function(){ event.preventDefault(); $.ajax({ url: {{ url('ajax_remove_session') }}, cache: false, success: function(result){ $(".success").append(result); } }); }); }); </script> 

ОБНОВЛЕНИЕ ВОПРОСА:

Со всеми кодами, найденными в маршрутизации, контроллером и шаблоном


Контроллер: PageController.php

/src/Simon/TestBundle/Controller/PageController.php

 <?php namespace Simon\TestBundle\Controller; use Symfony\Bundle\FrameworkBundle\Controller\Controller; use Symfony\Component\HttpFoundation\Session\Session; use Symfony\Component\HttpFoundation\JsonResponse; class PageController extends Controller { public function helloAction($name) { $session = new Session(); $session->start(); $session->get('name', 'Drak'); $session->get('name'); $session->getFlashBag()->add('notice', 'Profile Updated'); $messages = null; foreach($session->getFlashBag()->get('notice', array()) as $message){ $messages = $message; } return $this->render('SimonTestBundle:Page:index.html.twig', array('name' => $name.' '.$messages)); } public function ajaxRemoveSessionAction() { // Destroy the desired session $session = $this->getRequest()->getSession(); $session->remove('name'); return new JsonResponse(array('success' => true)); } } 

Шаблон: шаблон Twig

/src/Simon/TestBundle/Resources/views/Page/index.html.twig

 {% extends 'SimonTestBundle::layout.html.twig' %} {% block body %} <a href="#" id="remove_session">Remove session</a> <script type="text/javascript"> $('#remove_session').click(function(e){ e.preventDefault(); $.ajax({ url: {{ url('ajax_remove_session') }}, cache: false, success: function(html){ // do something on success } }).fail(function(event){ console.log(event); }); }); }); </script> {% endblock %} 

Маршрутизация:

/src/Simon/TestBundle/Resources/config/routing.yml

 simon_test_homepage: pattern: /hello/{name} defaults: { _controller: SimonTestBundle:Page:hello } ajax_remove_session: pattern: /remove-session defaults: { _controller: SimonTestBundle:Page:ajaxRemoveSession } 

Постарайтесь установить значение параметра URL между кавычками:

 url: '{{ url('ajax_remove_session') }}', 

Пример контроллера:

 use Symfony\Component\HttpFoundation\JsonResponse; public function ajaxRemoveSessionAction() { // Destroy the desired session $session = $this->getRequest()->getSession(); $session->remove('name'); return new JsonResponse(array('success' => true)); } 

Пример маршрутизации:

 ajax_remove_session: pattern: /remove-session defaults: { _controller: FooTestBundle:Page:ajaxRemoveSession } 

Пример ветки:

 <a href="#" id="remove_session">Remove session</a> <script type="text/javascript"> $(document).ready(function() { $('#remove_session').click(function(){ event.preventDefault(); $.ajax({ url: {{ url('ajax_remove_session') }}, cache: false, success: function(html){ // do something on success } }); }); }); </script> 

Это всего лишь примеры, требующие тестирования.

В вашем вызове AJAX используется глобальный объект event , который не является межсерверным и не должен использоваться (например, Firefox его не имеет).

Передать событие в вызове функции:

 $('#remove_session').click(function(e){ e.preventDefault(); // rest of your code }); 

Если вы это сделаете, jQuery позаботится о нормализации и правильном поведении браузера.

См. Также этот вопрос, чтобы узнать больше о различии между объектом глобального event и событием, переданным в функцию.


Если он все еще не работает

  • открытые инструменты разработчика в Chrome (F12)
  • проверьте консоль (вкладка Консоль ), если есть какие-либо сообщения об ошибках после нажатия кнопки
  • также откройте вкладку « Сеть » и посмотрите, будет ли после нажатия кнопки запросить какой-либо запрос; каков статус ответа?
  • убедитесь, что ваш контроллер работает с запросами GET (поскольку вы не указываете тип запроса, а GET – по умолчанию)
  • вы также можете попробовать добавить dataType: "json" к вашему запросу AJAX, но это не должно быть проблемой, так как JsonResponse от Symfony должен уже предоставлять необходимые заголовки ответов

Проверьте другие места

  • ошибка, которую вы указали, говорит, где неожиданно : есть; исследуйте эту линию; это код, который вы разместили здесь whole javascript, который у вас есть на вашей странице?

После вашего комментария к ответу @Laurent Wartel я предполагаю, что теперь вы получаете Uncaught SyntaxError: Unexpected token } . Теперь ясно, что у вас есть дополнительные скобки в конце вашей функции click() .

Кроме того, вы не дожидаетесь загрузки документа до привязки события click() . Из-за этого jQuery пытается связать событие с элементом, который еще не был отображен. Это обычная ошибка.

Чтобы запустить ваш код после загрузки страницы, вам необходимо обернуть его информацией $(function() { ... } . Пожалуйста, прочитайте полное объяснение здесь, поскольку это является основным, но очень важным.

Подводя итог, исправьте код следующим образом:

 <script type="text/javascript"> $(function() { $('#remove_session').click(function(e){ e.preventDefault(); $.ajax({ url: '{{ url('ajax_remove_session') }}', cache: false, success: function(html){ // do something on success } }).fail(function(event){ console.log(event); }); }); }); </script> 

Кажется, что вы удалили эту строку во время отладки, потому что она есть в вашем исходном вопросе, но отсутствует в исходном коде, который вы отправили позже.