In a project, you often encounter page segmentation, the most common system or Web site of the main interface. Main page is divided into, the above system introduction, the following author introduction, the Left System function menu, the right side is the menu really display interface.
Encounter this kind of segmentation page, everybody thinks first is frameset, use Framset to divide various frame, this way is simple. If you do not like the use of framset, people who like the design of the foreground may choose div stitching, floating, this test CSS style of foundation.
This is mainly to explain the problem of local refresh. Requirements are: Frame on the left, frame on the right.
Everyone must doubt that this refresh is no problem ah. That's true. Now use Framset, split two frame, each update their respective. Right frame Display Menu although update submit. It has no effect on the left frame.
To facilitate understanding, the left frame referred to as leftframe, the right frame for short rightframe; If I submit the Rightframe page, I need to update leftframe "dynamic" page. How do you do that?
In fact, the data is reread from the database;
Copy Code code as follows:
<framesetcols= "280,*" frameborder=yesbordercolor=silver>
<framesrc= "Modifymenu!showtreemenu" name= "Menutree" scrolling= "No" id= "Lefttree" >
<framesrc= "showmodifymenu.jsp" name= "main" scrolling= "AUTO" id= "Showmodifymenu" >
Lt;/frameset>
Where Modifymenu!showtreemenu is turned to the tree.jsp page
Now project, the foreground uses struts2, when submits the right page data, then assumes: then jumps again to the main interface, is equivalent reads the data again, but the load main interface unexpectedly is displays in the right area, thus has become two leftframe. It is not possible to change the redirection of Resulttype in Struts2.
Finally, even a simple JS to solve the problem.
In the Submit right page rightframe, use JS to update left leftframe. As follows:
In the rightframe of the body of the OnLoad event:
Copy Code code as follows:
Functioninit () {
Lefttree is the ID of the left frame
Reload this page
window.parent.frames["Lefttree"].location.reload ();
}
window.parent.frames["Lefttree"].location.reload ()
When you are at the end of a certain thinking, you can try to change the way of thinking, but also will be good.
Requirements are as follows: If you refresh the right rightframe page, refresh only the part left Leftframe "refresh a div".
Mention local part refresh, must think is Ajax local refresh.
Then we use the Ajax base of pure JS to achieve:
Copy Code code as follows:
Functioncreatexmlhttprequest () {
if (window. XMLHttpRequest) {
Returnnewxmlhttprequest ();
}elseif (window. ActiveXObject) {
Returnnewactivexobject ("Microsoft.XMLHTTP");
}
}
Functioninit () {
Then make a local refresh
Varxmlhttpreq=createxmlhttprequest ();
Get the starting URL, such as struts2 action or a servlet or JSP page
Varurl= "success.jsp";
Xmlhttpreq.open ("Get", url,true);
Because you're 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 div on the left page and then change the appearance of the display
window.parent.frames["Lefttree"].document.getelementbyid (divid). innerhtml= "Test";
}else{
alert (Xmlhttpreq.status+xmlhttpreq.responsetext);
}
}
};
Xmlhttpreq.send (NULL);
}
window.parent.frames["Lefttree"].document.getelementbyid (divid). Innerhtml=xmlhttpreq.responsetext
The background action is written as follows:
Copy Code code as follows:
01.httpservletresponseresponse=servletactioncontext.getresponse ();
Response.setcontenttype ("Text/html;charset=utf-8");
Out=response.getwriter ();
Out.print ("Incoming data from the background");
Two kinds of refreshing methods, a whole refreshing;
