从jsp页面将html表传递给servlet[重复]答案

【问题标题】：passing an html table to servlet from a jsp page [duplicate]从jsp页面将html表传递给servlet[重复]
【发布时间】：2014-12-01 04:58:43
【问题描述】：

我在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>

【问题讨论】：

什么是 action="showKwh" 我假设它映射到一个 servlet。所以您需要创建一个单独的 servlet 类并在那里使用 jdbc 代码将数据保存在 db 中。您可以在 jsp 中设置 table 属性并在 servlet 中获取。您还需要在 web.xml 中提供“/showKwh”的映射。查看此链接中的代码tutorialspoint.com/servlets/servlets-database-access.htm
感谢您的回答，但我毫不怀疑如何使用 servlet 并且我的 URl“showKwh”正在工作，但我需要一种将 html 表的整个数据读取或发送到 servlet 的方法

标签： java mysql jsp servlets

【解决方案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 继承自返回 Map 的 ServletRequest 方法 getParameterMap()。（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 来回传递数据。在往返中 - 也许基于表单会更实用。

【讨论】：

谢谢兄弟，能不能给我看的更清楚一些，请以为我是初学者
您需要哪些具体细节？
如何在客户端提取整个表的数据，并通过ajax请求以JSON的形式发送到服务器端解析。谢谢你的回复
我会用代码更新我的答案，因为我无法在 cmets 中对其进行格式化。
我已经更新了答案。您可以使用浏览器的开发工具（即 Chrome 或 Firefox 开发工具中的“网络”选项卡）查看与 ajax 请求一起发送的数据。

【解决方案2】：

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

String[] getParameterValues(String name)

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

request.getParameterValues("check1");

【讨论】：

感谢 Sudhir Dhumal，有没有一种方法可以读取 servlet 中 html 表的所有数据，或者有一种方法可以获取 html 数据的全部数据，然后将它们发送到 servlet