如何在<脚本>从JSP页面到Servlet

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

本文关键字：JSP Servlet 脚本 lt gt      更新时间：2023-09-26

我试图快速详细地解释我的计划

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>

原则上，在下面的JSP页面中有一个按钮表。每个按钮代表一个区域；用户决定点击各种按钮，这些按钮改变颜色和状态（开关）。一旦用户选择了他想要的按钮，按下提交按钮并向servlet发送一个名为"matrix"的数组，该数组包含关于每个按下或未按下按钮的信息（布尔值0或1）。

这就是我在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) {
     }
}

好吧，一旦按下提交按钮，servlet就会被调用，进入if块并执行命令request.getParameter，但遗憾的是matrix为null。我哪里错了？如何将该数组移动到此servlet？你能分享一下正确的代码吗？提前谢谢，如果我没有说太详细的话，我很抱歉。

在代码中，表单不发送任何名为"matrix"的参数，因为name="matrix"没有输入。因此，你必须做的第一件事就是改变这一点：

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

进入：

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

然后，您将不得不考虑如何序列化矩阵。输入只能包含字符串类型的值（并且只能将字符串发送到服务器），因此必须将数组序列化为字符串。这通常（但不一定）是通过JSON实现的。首先将矩阵转换为JSON字符串，然后将其设置为输入值：

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

然后在服务器中，您必须将其转换回数组。为此，可以使用多个库。两个常见的选项是Java中的JSON和Google的Gson。以下示例使用Gson，并假设序列化值始终是整数数组：

String matrixStr = request.getParameter("matrix");
Gson gson = new Gson();
Integer[] matrix = gson.fromJson(matrixStr, Integer[].class);
相关文章：