Accesso agli oggetti del modello Spring MVC in JavaScript

1. Panoramica

In questo tutorial, mostreremo come accedere agli oggetti Spring MVC nelle viste Thymeleaf che contengono codice JavaScript. Useremo Spring Boot e il motore di template Thymeleaf nei nostri esempi, ma l'idea funziona anche per altri motori di template.

Descriveremo due casi: quando il codice JavaScript è incorporato o interno alla pagina Web generata dal motore e quando è esterno alla pagina, ad esempio in un file JavaScript separato.

2. Configurazione

Supponiamo di aver già configurato un'applicazione Web Spring Boot che utilizza il motore di modelli Thymeleaf. Altrimenti, potresti trovare utili questi tutorial per iniziare:

  • Bootstrap di un'applicazione semplice: su come creare un'applicazione Spring Boot da zero
  • Spring MVC + Thymeleaf 3.0: Nuove funzionalità - su come utilizzare la sintassi Thymeleaf

Inoltre, supponiamo che la nostra applicazione abbia un controller corrispondente a un endpoint / indice che esegue il rendering di una vista da un modello denominato index.html . Questo modello potrebbe includere un codice JavaScript incorporato o esterno, ad esempio script.js .

Il nostro obiettivo è essere in grado di accedere ai parametri Spring MVC da codice JavaScript (JS) incorporato o esterno.

3. Accedere ai parametri

Prima di tutto, dobbiamo creare le variabili del modello che vogliamo utilizzare dal codice JS.

In Spring MVC, ci sono vari modi per farlo. Usiamo l' approccio ModelAndView :

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

Possiamo trovare altre possibilità nel nostro tutorial su Model , ModelMap e ModelView in Spring MVC.

4. Codice JS incorporato

Il codice JS incorporato non è altro che una parte del file index.html che si trova all'interno del fileelemento. Possiamo passare le variabili Spring MVC lì in modo abbastanza semplice:

 var number = [[${number}]]; var message = "[[${message}]]"; 

Il motore del modello Thymeleaf sostituisce ogni espressione con un valore disponibile nell'ambito dell'esecuzione corrente. Ciò significa che il motore del modello trasforma il codice sopra menzionato nel seguente codice HTML:

 var number = 1234; var message = "Hello from Spring MVC!"; 

5. Codice JS esterno

Supponiamo che il nostro codice JS esterno sia incluso nel file index.html utilizzando lo stessotag, in cui specifichiamo l' attributo src :

Ora, se vogliamo utilizzare i parametri Spring MVC da script.js , dovremmo:

  1. definire le variabili JS nel codice JS incorporato come abbiamo fatto nella sezione precedente
  2. accedere a queste variabili dal file script.js

Notare che il codice JS esterno deve essere richiamato dopo l'inizializzazione delle variabili del codice JS incorporato .

Ciò può essere ottenuto in due modi: specificando l'ordine di esecuzione di un codice JS o utilizzando un'esecuzione di codice JS asincrona.

5.1. Specificare l'ordine di esecuzione

Possiamo farlo dichiarando il codice JS esterno dopo quello incorporato in index.html :

 var number = [[${number}]]; var message = "[[${message}]]";  

5.2. Esecuzione di codice asincrono

In questo caso, l'ordine in cui dichiariamo il codice JS esterno e incorporato in index.html non ha importanza, ma dovremmo inserire il codice da script.js in un tipico wrapper caricato sulla pagina:

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

Nonostante la semplicità di questo codice, la pratica più comune consiste nell'usare invece jQuery . Includiamo questa libreria come primaelemento nel file index.html :

    ...  ... 

Ora, possiamo inserire il codice JS all'interno del seguente wrapper jQuery :

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

Con questo wrapper, possiamo garantire che il codice JS venga eseguito solo quando l'intero contenuto della pagina, e quindi tutto il resto del codice JS incorporato, è completamente caricato.

6. Un po 'di spiegazione

In Spring MVC, il motore di template Thymeleaf analizza solo il file template ( index.html nel nostro caso) e lo converte in un file HTML. Questo file, a sua volta, potrebbe includere riferimenti ad altre risorse che non rientrano nell'ambito del motore del modello. È il browser dell'utente che analizza queste risorse e rende la visualizzazione HTML.

Pertanto, tali risorse non vengono analizzate dal motore del modello e possiamo iniettare le variabili definite nel controller solo nel codice JS incorporato che diventa quindi disponibile per il codice JS esterno.

7. Conclusione

In questo tutorial, abbiamo imparato come accedere ai parametri Spring MVC all'interno di un codice JavaScript.

Come sempre, gli esempi di codice completi si trovano nel nostro repository GitHub.