Question

我在jsp页面中有html表，动态地从数据库加载数据然后我想通过servlet将表中的所有数据保存到数据库中。现在我的问题是我有一个jsp页面显示来自servlet的数据表，其中包含复选框，我必须将检查的内容发送到servlet以更新到数据库，如何做到这一点。

提前感谢，这是我的表

<form action="showKwh" method="POST">

    <input type="submit" value="show"/>

    <table id="adminTable" class="detailsTable">

        <tr class="header">
            <th colspan="4">Kilowat Entry</th>
        </tr>

        <tr class="tableHeading">
            <td></td>
            <td>customer id</td>
            <td>name</td>

            <td>group</td>
            <td>kwh</td>



            <td>kwd</td>

        </tr>

        <c:forEach  var="cust" items="${customerKwh}" varStatus="iter">
            <tr id="${cust.id}" class="${((iter.index % 2) == 1) ? 'lightBlue' : 'white'} tableRow">
                <td><input type="checkbox" name="check1" class="checker" value="ON" /></td>
                <td id="id?${customer.id}">${cust.id}</td>
                <td >${cust.name}</td>
                <td >${cust.type}</td>

                <td >${cust.kwh}</td>



                <td><input type="text" name="txt" size="8" id="kwd${cust.id}" value="${param.value}" class="name1"  /></td>

            </tr>
        </c:forEach>
    </table>
</form>

Answer 1

要么将提交后需要发布的所有数据放入表单字段并且浏览器发送它，要么使用jQuery之类的javascript来操作html表的DOM，在客户端提取数据并通过ajax请求发送要在服务器端解析的JSON或XML形式。

但是，这是非常奇怪的要求。由于表中的数据源自处理响应的同一服务器，因此使用一组行标识符进行响应就足够了，服务器将通过这些行标识符来识别完整的行数据。

您可以使用复选框的值传递这些标识符：<input type="checkbox" name="check1" class="checker" value="${cust.id}" />。然后，遵循HTML标准，只有具有checked或checked="checked"属性的复选框才会包含在回复中。然后，您的servlet可以处理所有选中的复选框并获取所有需要的标识符。

使用jQuery提取表单数据。首先，使用标记包含数据的数据类添加到<td>，以便我们可以使用jQuery选择它：

<td class="customerName">${cust.name}</td>
<td class="customerType">${cust.type}</td>
...and so on.

在关闭标记之前，将jQuery添加到JSP中，并添加元素<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>。然后在包含我们脚本的页面上添加另一个脚本元素。这是一个例子：

<html>
<head>

</head>
<body>

<form action="showKwh" method="POST">

    <input type="submit" value="show"/>

    <table id="adminTable" class="detailsTable">

        <tr class="header">
            <th colspan="4">Kilowat Entry</th>
        </tr>

        <tr class="tableHeading">
            <td></td>
            <td>customer id</td>
            <td>name</td>

            <td>group</td>
            <td>kwh</td>


            <td>kwd</td>

        </tr>

        <tr id="123" class="lightBlue tableRow">
            <td><input type="checkbox" name="check1" class="checker" value="123"/></td>
            <td id="id?123" class="customerId">123</td>
            <td class="customerName">Ivan</td>
            <td class="customerType">Person</td>

            <td class="customerKWH">54321</td>


            <td><input type="text" name="txt" size="8" id="kwd123" value="98765" class="name1"/></td>

        </tr>
    </table>
</form>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () { //launch this code after the whole DOM is loaded
        $("form").submit(function (event) { // function to process submitted table
                    var tableData = []; // we will store rows' data into this array
                    $("#adminTable") // select table by id
                            .find(".tableRow") // select rows by class
                            .has(":checked") // select only rows with checked checkboxes
                            .each(function () { // for each selected row extract data               
                                var tableRow = {};
                                var jRow = $(this);
                                tableRow.customerId = jRow.find('td.customerId').text();
                                tableRow.customerType = jRow.find('td.customerType').text();
                                tableRow.customerKWH = jRow.find('td.customerKWH').text();
                                tableRow.costomerKWD = jRow.find('input.name1').val();
                                tableData.push(tableRow);
                            });

                    $.post(
                            "http://google.com", /*url of consuming servlet*/
                            {tableData: tableData}, /*data*/
                            function () {
                                alert("Success!");
                            }, /*function to execute in case of success*/
                            "json" /* data type */
                    );
                    event.preventDefault(); //Prevent sending form by browser
                }
        );


    });
</script>
</body>
</html>

要处理表单在浏览器中提交的表值，，您可以考虑以下方法。

HttpServletRequest继承自ServletRequest方法getParameterMap（），它返回Map。（http://docs.oracle.com/javaee/7/api/javax/servlet/ServletRequest.html#getParameterMap()）。您可以使用一些参数名称约定来解析它。例如：

Map<String, String[]> tableData = getParameterMap();
String[] idsToUpdate = tableData.get("selectedIds");
for (String id : idsToUpdate){
    String kwdParamName = "kwd"+id;
    String kwd = tableData.get(kwdParamName)[0];
}

无论如何，您应该以某种方式解析请求数据。两者（基于JSON和基于表单）都有他们的优点。您应该选择哪一个产生更干净和强大的解决方案。也许，美学上更让你高兴。最后，但并非最不重要的是，您的客户端上下文是什么：它启用了javascript，是单页应用还是往返。在单页中，通过JSON来回传递数据是更常用的方法。在往返中 - 也许基于形式会更实际。

Answer 2

由于您的输入字段（复选框）位于for循环中，因此所有复选框都具有相同的名称属性。因此，您可以使用HttpServletRequest中提供的以下方法获取具有相同名称的输入字段的值。

String[] getParameterValues(String name)

在您的情况下，您可以使用以下语句获取所有值 -

request.getParameterValues("check1");

从jsp页面将html表传递给servlet

2 个答案: