JSP + JavaScript: шаблоны - PullRequest
Новая
       1

JSP + JavaScript: шаблоны

0 голосов
/ 05 июля 2011

У меня есть серверный HTML-шаблон с JSP + JSTL, который генерирует, скажем, таблицу с некоторыми пользовательскими данными: 

<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 и иметь только один шаблон в этом случае? Если да, то как это сделать?

1 Ответ

0 голосов
/ 05 июля 2011

Вы можете сделать следующее:

Шаблон 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 - это действие, которое создает нового пользователя на основе параметров, переданных через объект JavaScript user, а затем переходит к userRow.jsp для визуализации вновь созданного пользователя): 

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

function ajaxCallbackWhichAddsANewUserToUserTable(newUserRow) {
    $("#userTable").append(newUserRow);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...