javascript - 如何将 <script> 中的数组从 JSP 页面传递到 Servlet

标签 javascript java jquery jsp servlets

我尝试快速详细地解释我计划做什么。我有以下 JSP 页面:

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 页面中有一个按钮表。每个按钮代表一个区域;用户决定单击各种按钮,这些按钮会改变颜色和状态(开-关)。一旦用户选择了他想要的按钮,按下提交按钮并将一个名为“matrix”的数组发送到 servlet,其中包含有关按下或未按下的每个按钮的信息( boolean 值 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 block 并执行命令 request.getParameter,但不幸的是矩阵为空。我哪里错了?如何将该数组移至该 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));

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

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

关于javascript - 如何将 &lt;script&gt; 中的数组从 JSP 页面传递到 Servlet,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34387408/

相关文章:

javascript - 线性或 (n log n) 时间复杂度

javascript - 用于发布的 Angular Node 模块的版本控制

java - RxJava : How to unit test that an Observable is observed on and subscribed on the right scheduler?

javascript - 将 Java 对象解析为 Javascript

javascript - 如何在 Laravel 中拆分或分离序列化表单数据

JavaScript 便笺

javascript - Google 面积图中重复的一系列数据

java - 应用程序因cursor.getInt()而崩溃

javascript - jQuery - 如果子元素具有特定的 css 类,如何将 css 添加到父元素

javascript - 如何将 anchor 标记附加到 div 的父级?