JSP + JavaScript的：模板

我有一服務器端HTML模板用JSP + JSTL，其產生，比如說，一些用戶數據的表：JSP + JavaScript的：模板

<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 ='模板'」。

<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代碼複製，並只有一個單一的模板，在這種情況下？如果是的話，該怎麼做？

來源

2011-07-05 weekens

你可以做到以下幾點：

模板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); 
}

來源

2011-07-05 14:32:42

JB ，你的意思是，在AJAX回調中，我應該使用'$（「userTable」）。append（$。load（「userRow.jsp」，「userId =」+ id））''？（不正確，但只是爲了表明想法）。 – weekens

不是。這是無效的JQuery。我會編輯我的答案 –

JSP + JavaScript的：模板

回答

相關問題