How to pass an Array in a <script> from a JSP page to a Servlet

- 1 answer

Ad

I try to explain quickly and in detail what I plan to do. I've the following JSP page:

JSP

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .AreaFree {
            -moz-box-shadow: inset 0px 1px 0px 0px #3dc21b;
            -webkit-box-shadow: inset 0px 1px 0px 0px #3dc21b;
            background-color: #44c767;
            border: 1px solid #18ab29;
            display: inline-block;
            cursor: pointer;
            color: #ffffff;
            font-family: Arial;
            font-size: 16px;
            font-weight: bold;
            padding: 15px 21px;
            text-decoration: none;
        }

        .AreaFree:hover {
            background-color: #5cbf2a;
        }

        .AreaFree:active {
            position: relative;
        }

        .AreaOccupated {
            -moz-box-shadow: inset 0px 1px 0px 0px #3dc21b;
            -webkit-box-shadow: inset 0px 1px 0px 0px #3dc21b;
            background-color: #E00000;
            border: 1px solid #B00000;
            display: inline-block;
            cursor: pointer;
            color: #ffffff;
            font-family: Arial;
            font-size: 16px;
            font-weight: bold;
            padding: 15px 21px;
            text-decoration: none;
        }

        .AreaOccupated:hover {
            background-color: #D00000;
        }

        .AreaOccupated:active {
            position: relative;
        }

        .AreaBlocked {
            -moz-box-shadow: inset 0px 1px 0px 0px #3dc21b;
            -webkit-box-shadow: inset 0px 1px 0px 0px #3dc21b;
            background-color: #A8A8A8;
            border: 1px solid #808080;
            display: inline-block;
            cursor: pointer;
            color: #ffffff;
            font-family: Arial;
            font-size: 16px;
            font-weight: bold;
            padding: 15px 21px;
            text-decoration: none;
        }

        .AreaBlocked:hover {
            background-color: #989898;
        }

        .AreaBlocked:active {
            position: relative;
        }

        input.clicked {
            background-color: red;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
 </head>

<body>
    <form action="myServlet" method="post">
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    <input type="button" class="AreaFree" id="11" />
                </td>
                <td>
                    <input type="button" class="AreaFree" id="12" />
                </td>
                <td>
                    <input type="button" class="AreaFree" id="13" />
                </td>
                <td>
                    <input type="button" class="AreaFree" id="14" />
                </td>
                <td>
                    <input type="button" class="AreaFree" id="15" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" class="AreaFree" id="21" />
                </td>
                <td>
                    <input type="button" class="AreaFree" id="22" />
                </td>
                <td>
                    <input type="button" class="AreaFree" id="23" />
                </td>
                <td>
                    <input type="button" class="AreaFree" id="24" />
                </td>
                <td>
                    <input type="button" class="AreaFree" id="25" />
                </td>
            </tr>
            <input type="hidden" id="matrix" value="" />
            <input type="hidden" value="callServlet" name="whatsend">
            <input type="submit" value="submit">
    </form>

    <script>
        var matrix = [];
        for (var i = 0; i < 100; i++) {
            matrix.push(0);
        }
        // set the hidden field on init
        $('#matrix').val(matrix);
        $('input[type="button"]').on('click', function(evt) {
            var me = $(this);
            var idx = +me.attr('id'); // the + sign turns this value to a number
            if (matrix[idx] === 0) {
                matrix[idx] = 1;
                me.addClass('AreaBlocked');
            } else {
                matrix[idx] = 0;
                me.removeClass('AreaBlocked');
            }
            // update the hidden field every time a user clicks something
            $('#matrix').val(matrix);
        });
        </script>
    </body>
</html>

Principally, in the following JSP page there is a table of buttons. Each button represents an area; the user decides to click on various buttons and these change color and status (on-off). Once the user select the buttons that he wants, press the submit button and send an array called "matrix" to a servlet, that containing information on each button pressed or not (boolean 0 or 1).

That's what I do in the servlet "myServlet"

protected void processRequest(HttpServletRequest request,     HttpServletResponse response)
        throws ServletException, IOException {

response.setContentType("text/html;charset=UTF-8");
    try (PrintWriter out = response.getWriter()) {

        String whatsend = request.getParameter("whatsend");

        if(whatsend.equals("callServlet")){
             String matrix = request.getParameter("matrix");

        }

     }

     catch (SQLException ex) {

     }
}

Well, once you press the submit button the servlet is called, enters in the if block and executes the command request.getParameter, but unfortunately matrix is null. Where am I wrong? How do I move that array to this servlet? Could you kindly share the correct code? Thanks in advance, I'm sorry if I wasn't not much detailed.

Ad

Answer

Ad

In your code, the form does not send any parameter named "matrix", because there's no input with name="matrix". So the first thing you have to do is to change that:

<input type="hidden" id="matrix" value="" />

into that:

<input type="hidden" id="matrix" name="matrix" value="" />

Then, you will have to consider how are you serializing the matrix. An input can only hold a value of type string (and only strings can be sent to the server) so you have to serialize the array into a string. That is usually (but not necessarily) accomplished through JSON. You would first convert the matrix to a JSON string before setting it as a value for the input:

$('#matrix').val(JSON.stringify(matrix));

And then in the server you would have to convert it back to an array. You can use several libraries for that. Two common options are JSON in Java and Google's Gson. The following example uses Gson and assumes that the seralized value is always an array of integers:

String matrixStr = request.getParameter("matrix");
Gson gson = new Gson();
Integer[] matrix = gson.fromJson(matrixStr, Integer[].class);
Ad
source: stackoverflow.com
Ad