Question

我有一个使用JSP + JSTL的服务器端HTML模板，例如，它生成一个包含一些用户数据的表：

<body>
    ...
    <table>
        <c:forEach items="${users}" var="user">
        <tr>
            <td>${user.name}</td>
            <td>${user.age}</td>
            <td>${user.department}</td>
        </tr>
        </c:forEach>
    </table>
    ...
</body>

这是1号模板。

用户可以通过表单向服务器提交新数据。数据由AJAX发送，并且在成功请求时，应该动态地将其附加到表中而不进行任何页面重新加载。

要附加数据，我需要使用模板2，它封装在JavaScript中，或者出现在HTML页面上，显示为“display：none;”和“class ='template'”。

<tr class="template" style="display: none;">
    <td>%user.name%</td>
    <td>%user.age%</td>
    ...
</tr>
...
<script>
    $(".template").clone().fillTheTemplateAndAppendToTheTable(user); //just to explain
</script>

问题：我可以避免HTML代码重复，并且在这种情况下只有一个模板吗？如果是的话，怎么做？

Answer 1

您可以执行以下操作：

模板1：

<body>
    ...
    <table id="userTable">
        <c:forEach items="${users}" var="user">
        <%@include file="userRow.jsp" %>
        </c:forEach>
    </table>
    ...
</body>

userRow.jsp：

<tr>
    <td>${user.name}</td>
    <td>${user.age}</td>
    <td>${user.department}</td>
</tr>

显示完整表的操作将转发到第一个模板，处理ajax调用的操作将转发给userRow.jsp。

在你的ajax回调中，只需在表的末尾追加从服务器收到的HTML（即userRow.jsp的执行结果）。在JQuery中，它看起来像这样（其中createUser.action是基于通过user JavaScript对象传递的参数创建新用户的操作，然后转发到userRow.jsp以呈现新创建的用户）：

function createUser(user) {
    $.get("createUser.action", user, ajaxCallbackWhichAddsANewUserToUserTable);
}

function ajaxCallbackWhichAddsANewUserToUserTable(newUserRow) {
    $("#userTable").append(newUserRow);
}

JSP + JavaScript：模板化

1 个答案: