JSP + 자바 스크립트 : 템플릿

나는 말, 생성 JSP + JSTL, 일부 사용자 데이터가있는 테이블이있는 서버 측 HTML의 템플릿이 :이 템플릿 번호가JSP + 자바 스크립트 : 템플릿

을

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

사용자는 양식을 통해 새 데이터를 서버에 제출할 수 있습니다. 데이터는 AJAX에 의해 보내지고 성공적인 요청시 페이지를 다시로드하지 않고 테이블에 동적으로 추가해야합니다.

데이터를 추가하려면 자바 스크립트에 캡슐화되거나 HTML 페이지에 "display : none;"이있는 템플릿 번호 2를 사용해야합니다. 및 "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 코드 중복을 방지하고,이 경우 하나의 단일 템플릿을 가질 수있다? 그렇다면 어떻게해야합니까?

출처

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 콜백에서 테이블 끝에있는 서버 (즉, userRow.jsp 실행 결과)에서받은 HTML을 추가하기 만하면됩니다.

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

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

출처

2011-07-05 14:32:42

JB을 (createUser.action 새로 만든 사용자를 렌더링하는 userRow.jsp에 전달 후 user 자바 스크립트 객체를 통해 전달 된 매개 변수를 기반으로 새 사용자를 생성하는 작업입니다, 어디) JQuery와, 그것은 다음과 같을 것 , 당신은 AJAX 콜백에서'$ ("userTable") 같은 것을 사용해야한다는 것을 의미합니다. append ($ .load ("userRow.jsp", "userId ="+ id))'? (정확하지는 않지만 단지 아이디어를 보여주기 위해). – weekens

아니요. 유효한 JQuery가 아닙니다. 내 대답을 수정하겠습니다. –

JSP + 자바 스크립트 : 템플릿

답변

관련 문제