个人中心
gpt4 book ai didi

java - 将 html 表从 jsp 页面传递到 servlet

转载 作者：行者123 更新时间：2023-11-29 12:32:49 25 4
gpt4 key购买 nike

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

提前致谢，这是我的 table 

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

最佳答案

要么将提交时需要回发的所有数据放入表单字段中，然后浏览器发送它，要么使用一些 JavaScript(例如 jQuery)来操作 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.

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

<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 来回传递数据是更常见的方法。在往返中 - 也许基于表单会更实用。

关于java - 将 html 表从 jsp 页面传递到 servlet，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27221934/

25 4 0
文章推荐： MYSQL存储过程、审批和审批人
文章推荐： ios - 动态/可取消排队的 UITableviewcells 中的 UITextfield
文章推荐： php - 单纯用户的登录控制和管理面板加密
文章推荐： ios - 如何在多行上显示 UIButton 标签？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com