13 - JSP Client Data (Form) Processing

13.1 JSP Client Form Processing Overview

Sending data from client (browser) to server is a common and vital scenario of any web application. We all must have used this feature like Google search where we enter the word which we would want to search or filling a contact us page on any website etc. In this chapter we will learn how to achieve sending data from client to server.

Browser can send the data to server in two ways (these are known as http method types .There are several other http method types like put, delete, etc but get and post are the major ones)

· GET- As it name suggests, it is to get a resource or data from server.

· POST- Submit or post data to server for processing.

let’s discuss these methods in detail.

13.2 GET Method

Ideally the GET method should be used to get the data or resource from server but with GET method type we can send data to the server as well. There are several things which are important to understand about GET method.

· Data is submitted to the server using query parameter like “http://localhost:8080/jsp-tutorial/get.jsp?myParam=myValue

· As mentioned in above point , data is submitted in query param so it should never be used for sending sensitive information like passwords as data is clearly be seen in browser address bar.

· GET requests have length restrictions which means there is a limit on the size of data that can be submitted to server.

· Maximum length of URL can be 2048 characters.

· GET is default method type.

· GET request supports only ASCII characters as data .

· GET request invokes doGet() method of HttpServlet

13.3 POST Method

The POST method is intended to submit the data to the server for processing. Some Important points about POST method type are –

· Data submitted with POST method type is sent in message body so it is secure and cannot be seen in browser address bar.

· There is no limit on the data that can be sent through POST

· POST request cannot be cached.

· POST request supports binary data as well. We can upload file to the server using POST type.

· POST request invokes doPost() method of HttpServlet.

13.4 Reading parameters in destination jsp

We have already discussed how to read the data sent to jsp file but lets refresh the important points again.

JSP specification provides a “request” implicit object which provides three API

a) getParameter(String aParam)-gives the value request parameter of a given name.

b) getParameterValues(String aParam)- gives all the values request parameter of a given name.

c) getParameterNames() - gives the name of all request parameters. This API is useful when we do not know the name of request parameters OR if we want to keep the source and destination jsp files loosely coupled.

d) getInputStream()-used to read the binary data.

13.5 JSP client side processing examples

13.5.1 Example of Get and Post

Write an example to explain the difference between GET and POST

Solution- To submit a data from client , we need to have a HTML or jsp having a HTML form to display username and password field.

a) Create a login.jsp file inside WebContent folder. Html file will contain one form with two input fields (username and password). In below Jsp file , there is no method specified in form tag so it means request is GET as By default method type is GET.

In real world scenario, you will never display password on any jsp but in this example we are doing this to highlight the impact.

<html> 
  <head> 
    <meta charset="ISO-8859-1"> 
    <title>Login Form</title> 
  </head> 
  <body> 
   <form name="logonform" action="displayDetails.jsp" > 
     Username: <input type="text" name="username"/> 
    <br/> 
    Password:<input type="password" name="password"/> 
    <br/> 
    <input type="submit" value="Submit"/> 
   </form> 
  </body> 
</html>

b) Create displayDetails.jsp which will read the request parameters using request.getParameter() method and display them.Login.jsp submits username and password request parameter.

<html> 
  <head> 
    <title>Display Details</title> 
  </head> 
  <body>     
    <% 
     String username=request.getParameter("username"); 
     String password=request.getParameter("password"); 
     String message="Username is : "+ username + "<br/> Password is :" + password ; 
    %>     
    <strong> <%= message %> </strong> 
  </body> 
</html>

Testing – Hit the http://localhost:8080/jsp-tutorial/login.jsp (refer below). It will display two field user name and password.

Enter the username and password and submit. I have used password field so you will not be

see the password.

Username and password is sent as a query param and can be clearly seen in browser address bar as well. This is what we discussed as a drawback of using GET type for form submission. You can even bookmark this page

Let’s Change the program to submit it as POST.

a)Add method as POST in login.html (highlighted below)

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Login Form</title> 
  </head> 
  <body> 
    <form name="logonform" action="displayDetails.jsp" method="POST"> 
      Username: <input type="text" name="username"/> 
      <br/> 
      Password:<input type="password" name="password"/> 
      <br/> 
      <input type="submit" value="Submit"/> 
    </form> 
   </body> 
</html>

 

Testing-Submit the form again and see the change. This time , data is sent as message body and not as query params.

13.5.2 Query Param

It is not necessary that we can send data using Form only. Data can be sent directly also using Query Param (using GET) . We can simply send a Query parameters after adding ‘?’ followed by name and values of parameters. If there are multiple parameters , they need to separated by &

To see this in action simply hit the url

http://localhost:8080/jsp-tutorial/displayDetails.jsp?&username=myusername&password=myPassword

In this URL we are passing username and password query parameters to loginDetails.jsp

 

13.5.3 jSP checkbox

We can submit multiple values of same element using check box. Write an example to demonstrate check box data submission?

Create checkbox.jsp which will

display a group of check box and will submit the user selection to displayResults.jsp

checkbox.jsp

<html>
  <head>
    <title>
    </title>
  </head>
  <body>
    <H1>Select the fruits you like ? </H1>
    <form name="MutlipleValues" action="displayResults.jsp" method="POST">
      Orange <input type ="checkbox" name="CheckBoxGrp" value="Orange"/>
      <br/>
      Apple <input type ="checkbox" name="CheckBoxGrp" value="Apple"/>
      <br/>
      Banana<input type ="checkbox" name="CheckBoxGrp" value="Banana"/>
      <br/>
     <input type="submit" value="Submit"/>
    </form>
  </body>
</html>

displayResults.jsp

<html>
  <head>
   <title>
   </title>
  </head>
  <body>
   <H1>You have selected   </H1>
   <% 
     String message="";
     String values[] = request.getParameterValues("CheckBoxGrp"); if(values!=null)
     {    
       for(int i=0;i<values.length;i++)  
     {    
       message= message+ "<BR/>" + values[i]; 
     } 
     } 
       response.setContentType("text/html");
   %>
   <%= message %>
  </body>
</html>

Access the JSP using http://localhost:8080/jsp-tutorial/checkbox.jsp . Select the fruits and click submit

 

13.5.4 JSP - Display submitted values

We don’t know the name of form elements OR we can say request parameters. Write a program which will display all the submitted values.

Solution – Since we don’t know the name of request parameters , we cannot use request.getParameter(paramName) because this API needs the parameter name which we don’t know.

API also provides a method request.getParameterNames() which returns the Enumeration of all parameters name submitted.

We can simply use this API to get the name of all parameters and then call request.getParameter() for each parameter.

a) Create ContactForm.jsp with three input fields (name ,address,contact number )

<!DOCTYPE html> 
<html> 
  <head> 
     <title>Contact Form</title> 
  </head> 
  <body>     
    <form name="contactform" action="displayContactDetails.jsp"  method="POST">   
       Name: <input type="text" name="name" />
       <br /> 
       Address:<input type="text" name="address" /> 
       <br /> 
       Contact Number:<input type="text" name="contact" /> 
       <br /> 
       <input type="submit" value="Submit" /> 
    </form> 
  </body> 
</html>

b) Write a displayContactDetails.jsp file. In this code we have not hard coded any request parameter name instead used request.getParameterNames() API to get the parameters name and then grab a value of these parameters.

<html>
  <head> 
    <title>Display Contact Details</title> 
  </head> 
    <%@ page import="java.util.Enumeration"  %> 
  <body>     
    <%     
      Enumeration<String> paramEnumeration= request.getParameterNames();
      StringBuffer buffer = new StringBuffer();     
      while(paramEnumeration.hasMoreElements())     
      {         
        String paramName= paramEnumeration.nextElement();        
        String paramValue =request.getParameter(paramName);             
        buffer.append(paramName + ":" + paramValue);         
        buffer.append("<br/>");     
      }     
     %>     
     <strong> <%= buffer.toString() %>     </strong> 
  </body> 
</html>

Testing

Hit the url http://localhost:8080/jsp-tutorial/ContactForm.jsp

 

Enter the details and submit

 

Note: We need to import java.util.Enumeration using page import directive (as discussed in earlier chapters)

Like us on Facebook