1. Overview
In this tutorial, we’re going to show how to access Spring MVC objects in JSP views that contain JavaScript code. We’ll use Spring Boot and the JSP template engine in our examples, but the idea works for other template engines as well.
We’re going to describe two cases: when JavaScript code is embedded or internal to the web page generated by the engine, and when it is external to the page – for example, in a separate JavaScript file.
2. Setup
Let’s assume that we’ve already configured a Spring Boot web application that uses JSP template engine. Otherwise, you might find these tutorials useful to start:
- Bootstrap a Simple Application – on how to create a Spring Boot application from scratch
- Template Engines for Spring – on how to configure JSP in a Spring Boot application
Furthermore, let’s suppose that our application has a controller corresponding to an endpoint /index that renders a view from the JSP template named index.jsp. This template might include an embedded or an external JavaScript code, say script.js.
Our goal is to be able to access Spring MVC parameters from either embedded or external JavaScript (JS) code.
3. Access the Parameters
First of all, we need to create the model variables that we want to use from the JS code.
In Spring MVC, there are various ways of doing this. Let’s use the ModelAndView approach:
@RequestMapping("/index")
public ModelAndView index(Map<String, Object> model) {
model.put("number", 1234);
model.put("message", "Hello from Spring MVC!");
return new ModelAndView("/index");
}
We can find other possibilities in our tutorial on Model, ModelMap, and ModelView in Spring MVC.
4. Embedded JS Code
Embedded JS code is nothing but a part of the index.jsp file that is located inside the <script> element. We can pass Spring MVC variables there quite straightforwardly:
<script>
var number = <c:out value="${number}"></c:out>;
var message = "<c:out value="${message}"></c:out>";
</script>
As we explained in our Guide to JavaServer Pages, the JSP template engine replaces every JSTL string by a value that is available in the scope of the current execution. This means that the template engine transforms the code mentioned above into HTML:
<script>
var number = 1234;
var message = "Hello from Spring MVC!";
</script>
5. External JS Code
Let’s say that our external JS code is included in the index.jsp file using the same <script> tag, in which we specify the src attribute:
<script src="/js/script.js"></script>
Now, if we want to use the Spring MVC parameters from script.js, we should:
- define JS variables in embedded JS code as we did in the previous section
- access these variables from the script.js file
Note that the external JS code should be invoked after the initialization of the variables of the embedded JS code.
This can be achieved in two ways: by specifying the order of a JS code execution or by using an asynchronous JS code execution.
5.1. Specify the Order of Execution
We can do this by declaring the external JS code after the embedded one in index.jsp:
<script>
var number = <c:out value="${number}"></c:out>;
var message = "<c:out value="${message}"></c:out>";
</script>
<script src="/js/script.js"></script>
5.2. Asynchronous Code Execution
In this case, the order in which we declare the external and embedded JS code in the index.jsp is of no importance, but we should place the code from script.js into a typical on-page-loaded wrapper:
window.onload = function() {
// JS code
};
Despite the simplicity of this code, the most common practice is to use jQuery instead. We include this library as the first <script> element in the index.jsp file:
<!DOCTYPE html>
<html>
<head>
<script src="/js/jquery.js"></script>
...
</head>
...
</html>
Now, we may place the JS code inside the following jQuery wrapper:
$(function () {
// JS code
});
With this wrapper, we can guarantee that the JS code is executed only when the whole page content, and hence all other embedded JS code, is completely loaded.
6. A Bit of Explanation
In Spring MVC, the JSP template engine parses only the template file (index.jsp in our case) and converts it into an HTML file. This file, in turn, might include references to other resources that are out of the scope of the template engine. It’s the user’s browser that parses those resources and renders the HTML view.
Therefore, those resources are not parsed by the template engine, and we may inject variables defined in the controller only into the embedded JS code that then becomes available for the external JS code.
7. Conclusion
In this tutorial, we’ve learned how to access Spring MVC parameters inside JavaScript code.
As always, the complete code examples are in our GitHub repository.