In projects, we often encounter page segmentation, the most common main interface of a system or website. The main page is divided into system introduction at the top, author introduction at the bottom, system function menu on the left, and the interface where the menu is actually displayed on the right.
When encountering this type of split page, the first thing everyone thinks of is frameset. Using frameset to split multiple frames is a simple method. If you don’t like to use frameset, people who like front-end design may choose p splicing and floating, which will test your CSS style skills.
This time we mainly explain the issue of partial refresh. The requirements are: left frame, right frame.
You must be wondering, there is no problem with refreshing like this. Indeed. Now use frameset to split the two frames and update each one. Just update and submit the menu displayed in the frame on the right. It has no effect on the left frame.
For ease of understanding, the left Frame is referred to as LeftFrame, and the right Frame is referred to as RightFrame; if I submit the RightFrame page, I need to update the LeftFrame [Dynamic] page. What to do?
In fact, it means re-reading the data from the database;
Among them modifyMenu!showTreeMenu is redirected to the tree.jsp page
In the current project, struts2 is used at the front desk. When the data on the right page is submitted, the idea is: then jump to the main interface again, which is equivalent to re-reading the data, but the loaded main interface is actually displayed in the right area, so it becomes two LeftFrame. Even changing the redirection of resultType in Struts2 does not work.
Finally, a simple JS solved the problem.
After submitting the RightFrame on the right page, use JS to update the LeftFrame on the left. as follows:
The onload event of the body in rightFrame:
window.parent.frames[ "leftTree"].location.reload()
When you are at the end of a certain train of thought, you can try to change your train of thought, and you will see a bright future.
The requirements are as follows: If you refresh the right RightFrame page, only refresh part of the left LeftFrame [refresh a certain p].
When it comes to partial refresh, Ajax partial refresh must come to mind.
Then we use pure js Ajax basic implementation:
function init(){
//Perform partial refresh
var xmlHttpReq=createXmlHttpRequest();
//Get the starting url, such as struts2 action or servlet or jsp page
var url="success.jsp";
xmlHttpReq.open("GET",url,true);
//Because you are making an asynchronous call,
//So you need to register a callback event handler that the XMLHttpRequest object will call
xmlHttpReq.onreadystatechange=function(){
if(xmlHttpReq.readyState==4){
if(xmlHttpReq.status==200){
//Use parent to get a p in the left page, and then change the appearance of the display
window.parent.frames["leftTree"].document.getElementById(pId).innerHTML="Test";
}else{
alert(xmlHttpReq.status+xmlHttpReq.responseText);
}
}
};
xmlHttpReq.send(null);
}
window.parent.frames["leftTree"].document.getElementById(pId).innerHTML=xmlHttpReq.responseText
The writing method in the background action is as follows:
Two refresh methods, one overall refresh; one partial refresh;