Accessing Servlet Response Attributes With Javascript/Jquery

Question

I am using Java servlets with Tomcat to display a table of Places in HTML. The data in the table's rows consists of info like name, location, etc. and are obtained by taking the servlet response data and injecting it into the tags. Once this is done however, I need to use Javascript to manipulate the "td" elements based their values. So if one of the locations which went into a "td" element was "USA," my Javascript function would do something specific to the "USA" element, like make the surrounding border red, white and blue.

I do not want to send a request using $.ajax. I simply want to, within the scope of a script element, access the attributes returned by the servlet response like I do in the following way with JSP scriptlets

<% request.getAttribute("location"); %>

I'm kind of surprised I haven't found how to do this online because it seems like an daily action of anyone working with servlets and JS, but I've searched on SO and Google to no avail.

Answer 1

As explained by @CarlosGavidia (peruvian fellow), scriplets run in server side while JavaScript (and other frameworks on top of it like jQuery or Dojo) runs in client side e.g. in browser client. Also, scriptlets usage is highly discouraged, detailed explanation here: How to avoid Java code in JSP files?

If you accessed to the last link, you would know that you should use EL and JSTL to access to your page context (PageContext), request (ServletRequest), session (HttpSession) and/or application (ServletContext) attributes (more related info: How to pass parameter to jsp:include via c:set? What are the scopes of the variables in JSP?).

With this background, now you're able to understand that you can't directly access to request attributes (or others from Java code) unless they are set as part of the DOM or injected in javascript code. Showing examples for both cases:

1. Setting the request attribute as part of the DOM.

   <input type="hidden" id="hidReqAttr" value="${location}" />
   <script type="text/javascript">
       function foo() {
           var fromJavaSide = document.getElementById("hidReqAttr").value;
           //fromJavaSide value will be ${location}
       }
   </script>
   

2. Injecting the request attribute directly on JavaScript.

   <script type="text/javascript">
       function foo() {
           var fromJavaSide = '<c:out value="${location}" />';
           //fromJavaSide value will be ${location} as string
       }
   </script>
   

Note that using any of these approaches means that you can manipulate the Java server variable value using JavaScript but will work only on JavaScript side and won't affect the request attribute value set in the server side. In other words:

<script type="text/javascript">
    function foo() {
        var fromJavaSide = '<c:out value="${location}" />';
        //fromJavaSide value will be ${location} as string
        fromJavaSide = fromJavaSide + '_modified';
        //last line affects only the JavaScript variable, not the request attribute value
    }
</script>

---

So if one of the locations which went into a "td" element was "USA," my Javascript function would do something specific to the "USA" element, like make the surrounding border red, white and blue.

Use a HTML component with an ID or apply a CSS class name to your <td> to know where you will get your desired value. Using "USA" as example:

<td class="${location eq 'USA' ? 'usaStyle' : 'commonStyle'}">${location}</td>
<script type="text/javascript">
    function foo() {
        var usaTDs = document.getElementsByClassName('usaStyle');
        //now you have all TDs with usaStyle that has your `USA` text
    }
</script>

---

Based on your comment, you also want to access to request parameters (probably from a query String). Use ${param.parameterName} to get them. More info in the EL link above, check the Implicit EL objects section that explains about getting request parameters and other functionalities.

Answer 2

HTML DOM manipulation should be done with JavaScript. JSP/Servlets are server-side programming techniques and objects like HTTPServletRequest can´t be accessed through JavaScript: That instances live in the Servlet Container and JavaScript executes in the Client Browser.

On the other side, I see no problems in changing TD Tag contents through pure JavaScript. You can ease this task using a toolkit like Dojo or JQuery.

Answer 3

using ajax cal we can cal directly to our servlet class and   servlet return string in json format(using gson lib) we can parse json using jquery parse method     
 $.ajax({
        url: "controller/url", 
         success: function(result){
                alert(result);
            }});