뷰 부품을 업데이트 할 때 AJAX 메카닉

저는 아약스 atm 만 배우고 있으며, 지금까지는 그것을 가장 잘 응용 한 것은 폼 유효성 검사입니다.뷰 부품을 업데이트 할 때 AJAX 메카닉

내 개념적 질문은 정확히 예를 들어 특정 페이지 조각을 업데이트해야 할 때 디자인 문제를 해결하는 가장 좋은 방법입니다.

기본 시나리오 :

두 페이지가 같은 메뉴 및 바닥 글이 곳에 우리는 1 페이지와 2 페이지가 있습니다. 페이지 1에는 일부 통계 내용이 포함 된 깔끔하게 형식화 된 테이블이 포함되어 있으며 페이지 2에는 메시지가 포함되어 있습니다. Ajax를 구현하여 페이지가 1 페이지에서 2 페이지로 이동하거나 그 반대로 이동 될 때 메뉴가 맨 위에 머무르게합니다.

예를 들어 서버에서 JSON을 반환하는 요청 처리기가 있습니다. 페이지 1 아약스 요청의 경우 서버는 2 페이지 메시지에 대한 테이블 데이터 만 반환합니다.

반환하는 데이터의 페이지 조각을 올바르게 포맷하는 방법과 위치는 디자인 정보를 저장하는 방법과 위치에 따라 다릅니다. 일반적인 전략은 무엇입니까 - ajax 메서드 내에서 "success"이벤트에 대한 데이터에 css를 수동으로 적용하는 것입니까? 그러나 서버가 표준 요청에 대해 자체적으로 서식을 적용하므로 클라이언트와 서버 간의 상호 작용이 발생하지 않습니까? 그리고 만약 아약스 요청 요구에서 예제에서 나는 개인적으로 당신이 경우 문제가 될 것으로 판단에서 자바 스크립트로 HTML과 CSS 응용 프로그램의 대부분을 외부화 즉, 준 같은 극적으로 다른 디자인을 반환 콘텐츠 데이터 :

페이지의 큰 부분을 업데이트하여 클라이언트 측에서 유지 보수가 불가능 해지거나 클라이언트 측에 템플릿 엔진이 필요합니다.
서버 측에서 템플릿 엔진을 사용하고 java의 경우 일반 .jsp도 사용합니다. - 여기서 우리는 "apache tiles"의보기 청크 구문과 구조를 얻은 다음 클라이언트 측 Ajax 응답 처리 섹션에 대해 css로 일반 html을 작성해야합니다.
나는이 조금 생각 .. 물론

우리는 XML을 반환 할 수 있지만 개발 궤도는 컨버터가 자동으로 작업을 수행 예를 들어 스프링 프레임 워크의 경우와 같이, JSON에 찬성가는 것 같다 vaadin 또는 GWT 사용자를 염려하지만 전통적인 MVC와 코드 생성기를 사용하지 않습니다.

문맥을 좁히려면 JSP와 Spring MVC + Apache Tiles가있는 Spring MVC에서 사람들이이 문제를 어떻게 다룰 지 특히 관심이있다.

또한 JSON의 데이터가 포함 된 HTML 디자인 메타 데이터를 클라이언트에게 보낼 수도 있습니다. 아니면 정말 끔찍한 일입니까? 그러나 뷰 렌더링 기술과 서버 측에서의 불일치가 또 다시 발생합니다.

저는 여기에서 매우 근본적이고 중요한 것을 놓치고 있다고 생각합니다.

는 내가 참으로 Thymeleaf, JSP 태그, 또는 아파치 타일과 같은 템플릿 엔진을 사용하는 것이 좋습니다합니까, 당신은 다시 사용하게 될 경우, 시스템에 여러 페이지에 걸쳐이 메뉴 및 바닥 글을

출처

2013-06-29 Aubergine

답 : http://stackoverflow.com/questions/4816080/how-to-render-a-view-using-ajax-in-spring-mvc?rq=1 – Aubergine

, 감사합니다.

하지만 실제로 궁금한 점은 AJAX를 통해 부분 페이지 콘텐츠의 전환을 관리하는 방법이며 컨트롤러 레이어가 페이지 조각 생성을 담당하지 않게하려는 것입니다.당신이 JSON 형식으로 원시 데이터를 반환하는 두 개의 스프링 MVC 컨트롤러 방법을 만들 지금

<div id="page1" style="display: none"> 
    <%--table structure, without data--%> 
</div> 

<div id="page2" style="display: none"> 
    <%--message display, without message content--%> 
</div>

: 여기

, 당신은 모두 페이지 1 테이블을 포함하는 단일 페이지, 페이지 2 메시지를 생성 , 하나는 테이블 데이터를 반환하고, 다른 하나는 메시지를 반환합니다.

마지막으로 컨트롤러를 호출하는 Javascript 처리기를 작성하고 데이터를 채우며 페이지 전환을 관리하십시오.

$.getJSON('mycontroller/page1', params, function(jsonData) { 
    // populate table data 
    $('#page1').show(); 
    $('#page2').hide(); 
});

테이블의 데이터를 표시하고, : 나는 간결 jQuery를 구문을 사용합니다

$.getJSON('mycontroller/page2', params, function(jsonData) { 
    // populate message text 
    $('#page1').hide(); 
    $('#page2').show(); 
});

는 메시지를 표시 할 수 있습니다.

물론 자바 스크립트를 사용하고 있기 때문에 원하는 경우 show()를 slide 또는 fadeIn과 같은 환상적인 애니메이션 전환으로 대체 할 수 있습니다.

출처

2013-06-29 21:01:00

뷰 부품을 업데이트 할 때 AJAX 메카닉

답변

관련 문제