Перейти к основному содержимому

Доступ к объектам модели Spring MVC в JavaScript

· 4 мин. чтения

1. Обзор​

В этом руководстве мы собираемся показать, как получить доступ к объектам Spring MVC в представлениях Thymeleaf, которые содержат код JavaScript. В наших примерах мы будем использовать Spring Boot и механизм шаблонов Thymeleaf, но эта идея работает и для других механизмов шаблонов.

Мы собираемся описать два случая: когда код JavaScript встроен или находится внутри веб-страницы, сгенерированной движком, и когда он является внешним по отношению к странице — например, в отдельном файле JavaScript.

2. Настройка​

Предположим, что мы уже настроили веб-приложение Spring Boot, использующее механизм шаблонов Thymeleaf. В противном случае вам могут пригодиться следующие руководства:

Кроме того, давайте предположим, что наше приложение имеет контроллер, соответствующий конечной точке /index , который отображает представление из шаблона с именем index.html . Этот шаблон может включать встроенный или внешний код JavaScript, например script.js .

Наша цель — получить доступ к параметрам Spring MVC из встроенного или внешнего кода JavaScript (JS).

3. Доступ к параметрам​

Прежде всего, нам нужно создать переменные модели, которые мы хотим использовать, из кода JS.

В Spring MVC это можно сделать различными способами. Давайте воспользуемся подходом ModelAndView :

@RequestMapping("/index")
public ModelAndView thymeleafView(Map<String, Object> model) {
    model.put("number", 1234);
    model.put("message", "Hello from Spring MVC");
    return new ModelAndView("thymeleaf/index");
}

Мы можем найти другие возможности в нашем руководстве по Model , ModelMap и ModelView в Spring MVC .

4. Встроенный JS-код​

Встроенный JS-код — это не что иное, как часть файла index.html , расположенного внутри элемента <script> . Мы можем передать туда переменные Spring MVC довольно просто:

<script>
    var number = [[${number}]];
    var message = "[[${message}]]";
</script>

Механизм шаблонов Thymeleaf заменяет каждое выражение значением, доступным в области текущего выполнения. Это означает, что механизм шаблонов преобразует упомянутый выше код в следующий HTML-код:

<script>
    var number = 1234;
    var message = "Hello from Spring MVC!";
</script>

5. Внешний JS-код​

Допустим, наш внешний JS-код включен в файл index.html с помощью того же тега <script> , в котором мы указываем атрибут src : 

<script src="/js/script.js"></script>

Теперь, если мы хотим использовать параметры Spring MVC из script.js , мы должны:

  1. определить переменные JS во встроенном коде JS, как мы делали в предыдущем разделе.
  2. получить доступ к этим переменным из файла script.js

Обратите внимание, что внешний JS-код следует вызывать после инициализации переменных встроенного JS-кода .

Этого можно добиться двумя способами: задав порядок выполнения JS-кода или используя асинхронное выполнение JS-кода.

5.1. Укажите порядок выполнения​

Мы можем сделать это, объявив внешний JS-код после встроенного в index.html :

<script>
    var number = [[${number}]];
    var message = "[[${message}]]";
</script>
<script src="/js/script.js"></script>

5.2. Асинхронное выполнение кода​

В этом случае порядок, в котором мы объявляем внешний и встроенный код JS в index.html , не имеет значения, но мы должны поместить код из script.js в типичную загружаемую на странице обертку:

window.onload = function() {
    // JS code
};

Несмотря на простоту этого кода, наиболее распространенной практикой является использование вместо него jQuery . Мы включаем эту библиотеку в качестве первого элемента <script> в файл index.html : 

<!DOCTYPE html>
<html>
    <head>
        <script src="/js/jquery.js"></script>
        ...
    </head>
 ...
</html>

Теперь мы можем поместить код JS в следующую оболочку jQuery : 

$(function () {
    // JS code
});

С помощью этой оболочки мы можем гарантировать, что код JS выполняется только тогда, когда все содержимое страницы и, следовательно, весь другой встроенный код JS полностью загружены.

6. Немного пояснений​

В Spring MVC механизм шаблонов Thymeleaf анализирует только файл шаблона ( index.html в нашем случае) и преобразует его в файл HTML. Этот файл, в свою очередь, может содержать ссылки на другие ресурсы, выходящие за рамки механизма шаблонов. Браузер пользователя анализирует эти ресурсы и отображает HTML-представление.

Поэтому эти ресурсы не анализируются механизмом шаблонов, и мы можем вводить переменные, определенные в контроллере, только во встроенный код JS, который затем становится доступным для внешнего кода JS.

7. Заключение​

В этом руководстве мы узнали, как получить доступ к параметрам Spring MVC внутри кода JavaScript.

Как всегда, полные примеры кода находятся в нашем репозитории на GitHub .