05.05.2013

Пример: Ajax с помощью JQuery в Spring MVC.

Для реализации Ajax в Spring MVC не принципиально, какую JavaScript библиотеку использовать, наверное самый распространенный способ - использование JQuery для создания Ajax запроса и обработки ответа от сервера. Посмотрим на простой пример, как можно это сделать. Сначала создаем простое веб-приложение Spring MVC, в данном случае используем Spring Tool Suite. Для того чтобы создать необходимый шаблонный веб-проект, нужно выбрать File > New > Spring Template Project > Spring MVC Project. После этого у нас есть полноценный проект, со всеми включенными зависимостями, которыми управляет Maven. STS автоматически создал необходимые файлы конфигурации, менять которые пока не нужно. Кроме того, у нас есть один контроллер - HomeController.java и домашняя страница - home.jsp. Для начала приступим к изменению контроллера: 
@Controller
public class HomeController { 
 
 @RequestMapping(value = "/getCharNum", method = RequestMethod.GET)
 public @ResponseBody Response getCharNum(@RequestParam String text) { 
 
  Response result = new Response();

  if (text != null) {
   result.setText(text);
   result.setCount(text.length());
  }
  
  return result;
 }
 
 @RequestMapping(value = "/", method = RequestMethod.GET)
 public String home(Locale locale, Model model) {
  return "home";
 }
}

В методе home просто удалено лишнее, теперь он только возвращает название необходимого представления (home.jsp)  в ответ на запрос главной страницы приложения. А метод getCharNum ответственен за обработку Ajax запроса. С помощью аннотации @RequestMapping мы указываем адрес, по которому будет выполнен запрос, и тип  запроса (у нас это будет GET). В качестве аргумента метод принимает параметр GET запроса, в данном случае это просто текст. С ответом все более интересно. Сосем не обязательно возвращаемым значением метода должен быть объект, но это сделано специально для примера. С помощью Jquery мы создадим GET запрос, а ответ от сервера получим в виде JSON. Таким образом возвращаемый методом Java объект автоматически преобразуется в JSON. Для того, чтобы это стало возможным, нужно включить в проект Jackson. Добавим в pom.xml необходимую зависимость:

<dependency>
   <groupId>org.codehaus.jackson</groupId>
   <artifactId>jackson-mapper-asl</artifactId>
   <version>1.5.3</version>
</dependency>

Класс Response (см. полный код примера) не содержит ничего необычного - два поля, POJO. В ответ записывается сам переданный в запросе текст и количество символов в нем. На стороне сервера все готово, теперь отредактируем страницу home.jsp таким образом (JQurey в данном случае мы поместили в директорию проекта webapp/resources/js/):

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<!DOCTYPE html>
<html>
<head>
<title>Spring MVC Ajax example</title>
<script type="text/JavaScript"
 src="${pageContext.request.contextPath}/resources/js/jquery-1.9.1.min.js">
</script>

<script type="text/javascript">
function doAjax() {
 
 var inputText = $("#input_str").val(); 
 
 $.ajax({
  url : 'getCharNum',
  type: 'GET',
  dataType: 'json',
  contentType: 'application/json',
     mimeType: 'application/json',
  data : ({
   text: inputText
  }),
  success: function (data) { 
   
   var result = '"'+data.text+'", '+data.count+' characters';
   $("#result_text").text(result);
  }
 });
} 
</script>
</head>
<body>
 <h3>Enter text:</h3>
 <input id="input_str" type="text">
 <input type="button" value="OK" onclick="doAjax()">
 <p id="result_text"></p>
</body>
</html>

По нажатию кнопки, с помощью JQuery создается Ajax запрос на сервер по указанному адресу (url : 'getCharNum'), а в ответ как и предполагалось возвращается JSON. После этого перерисовываем на странице текст, содержащий ответ сервера. Результат будет выглядеть примерно так:

Пример полностью



Теги: javaEE Spring

comments powered by Disqus