프로젝트에서 우리는 시스템이나 웹사이트의 가장 일반적인 기본 인터페이스인 페이지 분할을 자주 접하게 됩니다. 메인 페이지는 상단의 시스템 소개, 하단의 작성자 소개, 좌측의 시스템 기능 메뉴, 우측의 메뉴가 실제로 표시되는 인터페이스로 구분됩니다.
이러한 유형의 분할 페이지를 접하면 누구나 가장 먼저 생각하는 것은 프레임셋입니다. 프레임셋을 사용하여 여러 프레임을 분할하는 것은 간단한 방법입니다. 프레임셋을 사용하고 싶지 않다면 프런트 엔드 디자인을 좋아하는 사람들은 p 스플라이싱과 플로팅을 선택하여 CSS 스타일 기술을 테스트할 수 있습니다.
이번에는 주로 부분 새로 고침 문제에 대해 설명합니다. 요구 사항은 왼쪽 프레임, 오른쪽 프레임입니다.
이렇게 새로고침해도 문제가 없는지 궁금하실 겁니다. 물론. 이제 프레임셋을 사용하여 두 프레임을 분할하고 각각 업데이트합니다. 오른쪽 프레임에 표시된 메뉴를 업데이트하고 제출하면 됩니다. 왼쪽 프레임에는 영향을 주지 않습니다.
이해를 돕기 위해 왼쪽 프레임을 LeftFrame, 오른쪽 프레임을 RightFrame이라고 합니다. RightFrame 페이지를 제출하면 LeftFrame [Dynamic] 페이지를 업데이트해야 합니다. 무엇을 해야 할까요?
실제로 이는 데이터베이스에서 데이터를 다시 읽는 것을 의미합니다.
그 중 ModifiedMenu!showTreeMenu는 tree.jsp 페이지로 리디렉션됩니다.
현재 프로젝트에서는 오른쪽 페이지의 데이터가 제출되면 프론트 데스크에서 struts2가 사용됩니다. 그런 다음 메인 인터페이스로 다시 점프합니다. 이는 데이터를 다시 읽는 것과 동일하지만 로드된 메인 인터페이스입니다. 실제로는 오른쪽 영역에 표시되므로 2개의 LeftFrame이 됩니다. Struts2에서 resultType의 리디렉션을 변경해도 작동하지 않습니다.
마지막으로 간단한 JS가 문제를 해결했습니다.
오른쪽 페이지의 RightFrame을 제출한 후 JS를 사용하여 왼쪽의 LeftFrame을 업데이트합니다. 다음과 같이:
rightFrame에 있는 본문의 onload 이벤트:
window.parent.frames[ "leftTree"].location.reload()
당신이 어떤 생각의 흐름의 끝에 있을 때, 당신의 생각의 흐름을 바꾸려고 노력할 수 있으며, 그러면 밝은 미래가 보일 것입니다.
요구 사항은 다음과 같습니다. 오른쪽 RightFrame 페이지를 새로 고치는 경우 왼쪽 LeftFrame의 일부만 새로 고치십시오[특정 p 새로 고침].
부분 새로 고침의 경우 Ajax 부분 새로 고침을 염두에 두어야 합니다.
그런 다음 순수 js Ajax 기본 구현을 사용합니다.
함수 초기화(){
//부분 새로 고침 수행
var xmlHttpReq=createXmlHttpRequest();
//struts2 액션, 서블릿 또는 jsp 페이지와 같은 시작 URL을 가져옵니다.
var url="성공.jsp";
xmlHttpReq.open("GET",url,true);
//비동기 호출을 하기 때문에
//따라서 XMLHttpRequest 객체가 호출할 콜백 이벤트 핸들러를 등록해야 합니다.
xmlHttpReq.onreadystatechange=함수(){
if(xmlHttpReq.readyState==4){
if(xmlHttpReq.status==200){
//부모를 사용하여 왼쪽 페이지에 p를 가져온 다음 디스플레이 모양을 변경합니다.
window.parent.frames["leftTree"].document.getElementById(pId).innerHTML="테스트";
}또 다른{
경고(xmlHttpReq.status+xmlHttpReq.responseText);
}
}
};
xmlHttpReq.send(null);
}
window.parent.frames["leftTree"].document.getElementById(pId).innerHTML=xmlHttpReq.responseText
백그라운드 액션에서의 쓰기 방법은 다음과 같습니다.
두 가지 새로 고침 방법, 하나는 전체 새로 고침, 하나는 부분 새로 고침입니다.