JSP/Servlet | Passing Values Between Client and Server | Receiving Values with a Query String

Tags:

With only the basic JSP tags explained previously, we can now display something simple. This time, let’s go a step further and perform an interactive task: send something from the client to the server, receive it, and return it to the client.

The key point in this kind of work is how to send the necessary information from the client to the server. Once you understand that, the server can perform the required processing and send back the corresponding display.

There are several ways to do this. First, let’s start with the simplest method: using a query string. A query string is the parameter part attached to the end of a URL.

You may have seen URLs on websites that look like http://xxx/?abc=xyz, with something appended after the address. That is a query string. It has the following form.

http://domain/file?name1=value1&name2=value2& ...

Add a question mark (?) after the URL, and after that write values in the form “name=value”. When passing multiple values, connect them with the ampersand (&) symbol. Alphanumeric text values can usually be written as they are, but symbols and double-byte characters can cause problems, so they generally need to be encoded using URL encoding.

How do we receive values sent this way in JSP? Use the built-in object named “request”. This is a special object that can be used from the beginning without any declaration.

request contains various information about the request sent to the server from the client. This object provides a method named getParameter. You can use it to extract query string values.

String variable = request.getParameter(valueName);

Call it like this. Now let’s make a simple sample and exchange a string between the server and client.

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
String str = request.getParameter("param");
%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Sample jsp</title>
    <style>
    h1 {font-size:16pt; background:#AAFFAA; padding:5px; }
    </style>
    <script type="text/javascript">
    function doAction(){
        var s = document.getElementById('input').value;
        var url = 'hello4.jsp?param=' + encodeURI(s);
        window.location.href = url;
    }
    </script>
</head>
<body>
    <h1>Sample jsp page</h1>
    <p>This page is a sample.</p>
    <p>Parameter: <%=str%></p>
    <input type="text" id="input">
    <button onclick="doAction();">Click</button>
    </body>
</html>

In the sample above, when you write text in the input field and press the button, a message is displayed. Here, JavaScript creates a page address with a query string attached and jumps to it.

var s = document.getElementById('input').value;
var url = 'helo.jsp?param=' + encodeURI(s);
window.location.href = url;

For example, if you enter “abc” in the field, the URL helo.jsp?param=abc is sent to the server. On the server side, the JSP code receives the parameter value.

String str = request.getParameter("param");

This assigns the text “abc” to the variable str. After that, it outputs the received value with something like <p>Parameter: <%=str %></p>.

This time we are only displaying it, but of course you can perform various operations based on the received value and output the result.