Access Java / Servlet / JSP / JSTL / EL variables in JavaScript

Question

I have a form in JSP. I have to populate it based on the request object (from the servlet). How do I use Java Script for accessing request object attributes or if you can suggest me any other better way to populate form dynamically?

Goods

Answer 1

You need to realize that Java/JSP is merely a HTML/CSS/JS code producer. So all you need to do is to just let JSP print the Java variable as if it is a JavaScript variable and that the generated HTML/JS code output is syntactically valid.

Provided that the Java variable is available in the EL scope by ${foo}, here are several examples how to print it:

<script>var foo = '${foo}';</script>

<script>someFunction('${foo}');</script>

<div onclick="someFunction('${foo}')">...</div>

Imagine that the Java variable has the value "bar", then JSP will ultimately generate this HTML which you can verify by rightclick, View Source in the webbrowser:

<script>var foo = 'bar';</script>

<script>someFunction('bar');</script>

<div onclick="someFunction('bar')">...</div>

Do note that those singlequotes are thus mandatory in order to represent a string typed variable in JS. If you have used var foo = ${foo}; instead, then it would print var foo = bar;, which may end up in "bar is undefined" errors in when you attempt to access it further down in JS code (you can see JS errors in JS console of browser's web developer toolset which you can open by pressing F12 in Chrome/FireFox23+/IE9+). Also note that if the variable represents a number or a boolean, which doesn't need to be quoted, then it will just work fine.

If the variable happens to originate from user-controlled input, then keep in mind to take into account XSS attack holes and JS escaping. Near the bottom of our EL wiki page you can find an example how to create a custom EL function which escapes a Java variable for safe usage in JS.

If the variable is a bit more complex, e.g. a Java bean, or a list thereof, or a map, then you can use one of the many available JSON libraries to convert the Java object to a JSON string. Here's an example assuming Gson.

String someObjectAsJson = new Gson().toJson(someObject);

Note that this way you don't need to print it as a quoted string anymore.

<script>var foo = ${someObjectAsJson};</script>

See also:

• Our JSP wiki page - see the chapter "JavaScript".
• How to escape JavaScript in JSP?
• Call Servlet and invoke Java code from JavaScript along with parameters
• How to use Servlets and Ajax?

Kaltman

Hi @BalusC. I'm not sure what the OP means by "request object from the servlet". What do I need to do to have attributes in the request object? – Lowboy

I use data attributes to avoid inline script tags and global js variables. Is your solution preferable to using a data-attribute? (I am dealing with storing a large JSON variable). – Pratt

@Kaltman I'm not sure if you got notified for the previous comment. Just wanted to make sure you saw it... – Pratt

Answer 2

If you're pre-populating the form fields based on parameters in the HTTP request, then why not simply do this on the server side in your JSP... rather than on the client side with JavaScript? In the JSP it would look vaguely like this:

<input type="text" name="myFormField1" value="<%= request.getParameter("value1"); %>"/>

On the client side, JavaScript doesn't really have the concept of a "request object". You pretty much have to parse the query string yourself manually to get at the CGI parameters. I suspect that isn't what you're actually wanting to do.

Gimlet

Yes... obviously you would also want to sanitize the parameter, to avoid any kind of XSS or injection attack. – Gimlet

Answer 3

Passing JSON from JSP to Javascript.

I came here looking for this, @BalusC's answer helped to an extent but didn't solve the problem to the core. After digging deep into <script> tag, I came across this solution.

<script id="jsonData" type="application/json">${jsonFromJava}</script>

and in the JS:

var fetchedJson = JSON.parse(document.getElementById('jsonData').textContent);

Sweeting

Answer 4

In JSP file:

<head>
...
<%@ page import="com.common.Constants" %>
...
</head>

<script type="text/javascript"> 
        var constant = "<%=Constants.CONSTANT%>"
</script>

This constant variable will be then available to .js files that are declared after the above code.

Constants.java is a java file containing a static constant named CONSTANT.

The scenario that I had was, I needed one constant from a property file, so instead of constructing a property file for javascript, I did this.

Joule

Answer 5

In JSP page :

<c:set var="list_size" value="${list1.size() }"></c:set>

Access this value in Javascipt page using :

var list_size = parseInt($('#list_size').val());

I added javascript page in my project externally.

Carlos