javascript - 如何在 JavaScript 中构建 Spring 表单

问题描述

我有一个.jsp视图页面，它在加载时动态构建一个表。下表显示了一个片段：

根据参数是否为非空，每行末尾personFilename有或没有按钮。Download单击此按钮会将行中的值发送到 Java Spring 控制器方法，该方法会在浏览器中下载与该人对应的文件。

在同一视图页面上还有两个输入文本字段start和end年龄以及一个按钮。Filter单击此按钮必须删除整个表并动态构建另一个表，其中我们只包含Age所需范围内的行。

我正在努力的是在 JavaScript 中创建这个新表。我不知道如何将弹簧<form:form...>...</form:form>作为innerHTML行的单元格。这是必不可少的，因为我希望从按钮单击到控制器的映射能够像在.jsp视图页面的初始加载上构建的原始表单一样工作。

我知道弹簧表单不能用 JavaScript 构建，那么有没有替代方法可以帮助我创建带有映射到 Java 控制器方法的按钮的表？

这是相关.js代码，后面是.jsp文件中的相关部分。

function deleteWholeTable() {
    var table = document.getElementById("dataTable");
    var rows = table.rows;
    var i = rows.length;
    while (--i) {
        table.deleteRow(i);
    }
}

function appendRowToTable(name, age, personFilename) {
    var table = document.getElementById("dataTable");
    // get the current length of the table
    var rowsOfTable = table.rows.length; 
    // insert a new row at the end
    var row = table.insertRow(rowsOfTable);
    // put name and age in cells 1 and 2
    var cell1 = row.insertCell(0); cell1.innerHTML = name;
    var cell2 = row.insertCell(1); cell2.innerHTML = age;
    if (personFilename){
        var cell8 = row.insertCell(7); cell8.innerHTML =
        // WHAT TO WRITE HERE?  CAN'T MAKE A SPRING FORM AS DONE IN JSP FILE
        // NEED TO INSERT A FORM WITH BUTTON THAT SENDS DATA TO /downloadPersonFile WHEN IT IS CLICKED (just like in jsp file)
    }
    else{
        var cell8 = row.insertCell(7); cell8.innerHTML = '';
    }
}

<!DOCTYPE html>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<%--other irrelevant stuff here--%>

<div class="form-group col-md-2">
    <input type="text" id="ageStart" placeholder="Start Age..">
</div>
<div class="form-group col-md-2">
    <input type="text" id="ageEnd" placeholder="End Age..">
</div>
<div class="form-group col-md-2">
    <button  class="btn btn-primary" id="filterData">Filter</button>
</div>


<%--this is the outer form--%>
 <form:form  id = "outerForm" enctype="multipart/form-data" modelAttribute="detailList" >
    <div id="tableDiv" >
        <table id = "dataTable" class="table table-striped table-bordered table-sm " >
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Download File</th>
            </tr>
            <c:forEach items="${detailList.personDetailList}" var="personDetail" varStatus="tagStatus">
                <tr>
                    <td>${personDetail.name}</td>
                    <td>${personDetail.age}</td>
                    <td>
                    <%--this is the spring form that I care about and want to recreate in JS--%>
                        <form:form method = "POST" action = "/downloadPersonFile">
                            <c:choose>
                                <c:when test="${empty (personDetail.personFilename)}">
                                </c:when>
                                <c:otherwise>
                                <%--when the personFilename is non-empty, add a download button--%>
                                    <button type="submit" class="btn btn-success btn-lg" name="personDetail" value="${personDetail.name},${personDetail.age},${personDetail.personFilename}">Download</button>
                                </c:otherwise>
                            </c:choose>
                        </form:form>
                    </td>
                </tr>
            </c:forEach>
        </table>
    </div>
</form:form>
              
              
<script>
$('#filterData').on('click', function (e) {
    // first we delete the table built above and then rebuilt it only using the rows where age is in desired range
   deleteWholeTable();
   var startAge = $('#ageStart').val();
   var endAge = $('#ageEnd').val();
   <c:forEach items="${detailList.personDetailList}" var="personDetail" varStatus="tagStatus">
       var personAge = "${personDetail.age}";
       // convert personAge, startAge, endAge to integer
       if (personAge >= startAge && personAge <= endAge ){
            appendRowToTable("${personDetail.name}", "${personDetail.age}","${personDetail.personFilename}");
       }
   </c:forEach>
});

</script>

这是Java控制器：

@RequestMapping(value = "/downloadPersonFile", method = RequestMethod.POST, params={"personDetail"})
public ModelAndView  getAndDownloadPersonFile(@RequestParam("personDetail") String personDetail, HttpServletResponse response, HttpServletRequest request) throws Exception {
        String personAttr[] = personDetail.split(",");
        // the following function fetches the file from database and downloads it in browser 
        fetchAndDownload(personAttr[0], personAttr[1], personAttr[2], response);
        return null;
}

一般来说，我是 JavaScript 和 Spring MVC 框架的新手。任何帮助表示赞赏。谢谢。

标签： javascripthtmlspringjsp

javascript - 如何在 JavaScript 中构建 Spring 表单

问题描述

解决方案

推荐阅读