In Projekten stoßen wir häufig auf Seitensegmentierung, die häufigste Hauptschnittstelle eines Systems oder einer Website. Die Hauptseite ist in die Systemeinführung oben, die Autoreneinführung unten, das Systemfunktionsmenü links und die Schnittstelle, auf der das Menü tatsächlich angezeigt wird, rechts unterteilt.
Wenn man auf diese Art von geteilter Seite stößt, denkt jeder zuerst an Frameset. Die Verwendung von Frameset zum Teilen mehrerer Frames ist eine einfache Methode. Wenn Sie kein Frameset verwenden möchten, können Leute, die Front-End-Design mögen, p-Splicing und Floating wählen, was Ihre CSS-Stilfähigkeiten auf die Probe stellt.
Dieses Mal erklären wir hauptsächlich das Problem der teilweisen Aktualisierung. Die Anforderungen sind: linker Rahmen, rechter Rahmen.
Sie fragen sich bestimmt, dass eine solche Auffrischung kein Problem darstellt. In der Tat. Verwenden Sie nun „frameset“, um die beiden Frames zu teilen und jeden einzelnen zu aktualisieren. Aktualisieren und senden Sie einfach das im rechten Rahmen angezeigte Menü. Es hat keine Auswirkung auf den linken Frame.
Zum besseren Verständnis wird der linke Frame als LeftFrame und der rechte Frame als RightFrame bezeichnet. Wenn ich die RightFrame-Seite übermittle, muss ich die LeftFrame-Seite [Dynamisch] aktualisieren. Was zu tun?
Tatsächlich bedeutet es, die Daten erneut aus der Datenbank zu lesen;
Darunter wird „modifyMenu!showTreeMenu“ auf die Seite „tree.jsp“ umgeleitet
Im aktuellen Projekt wird struts2 an der Rezeption verwendet. Wenn die Daten auf der rechten Seite übermittelt werden, lautet die Idee: Springen Sie dann erneut zur Hauptschnittstelle, was einem erneuten Lesen der Daten, aber der geladenen Hauptschnittstelle entspricht wird tatsächlich im rechten Bereich angezeigt, sodass es zu zwei LeftFrames wird. Auch das Ändern der Umleitung von resultType in Struts2 funktioniert nicht.
Schließlich löste ein einfacher JS das Problem.
Nachdem Sie den RightFrame auf der rechten Seite übermittelt haben, aktualisieren Sie den LeftFrame auf der linken Seite mit JS. wie folgt:
Das Onload-Ereignis des Körpers in rightFrame:
window.parent.frames[ "leftTree"].location.reload()
Wenn Sie am Ende eines bestimmten Gedankengangs angelangt sind, können Sie versuchen, Ihren Gedankengang zu ändern, und Sie werden in eine glänzende Zukunft blicken.
Die Anforderungen lauten wie folgt: Wenn Sie die rechte RightFrame-Seite aktualisieren, aktualisieren Sie nur einen Teil des linken LeftFrame [aktualisieren Sie einen bestimmten p].
Wenn es um eine teilweise Aktualisierung geht, muss man an die teilweise Aktualisierung von Ajax denken.
Dann verwenden wir die reine JS-Ajax-Basisimplementierung:
Funktion init(){
//Teilweise Aktualisierung durchführen
var xmlHttpReq=createXmlHttpRequest();
//Start-URL abrufen, z. B. Struts2-Aktion oder Servlet- oder JSP-Seite
var url="success.jsp";
xmlHttpReq.open("GET",url,true);
//Weil Sie einen asynchronen Aufruf tätigen,
//Sie müssen also einen Callback-Ereignishandler registrieren, den das XMLHttpRequest-Objekt aufruft
xmlHttpReq.onreadystatechange=function(){
if(xmlHttpReq.readyState==4){
if(xmlHttpReq.status==200){
//Verwenden Sie parent, um ein p auf der linken Seite zu erhalten, und ändern Sie dann das Erscheinungsbild der Anzeige
window.parent.frames["leftTree"].document.getElementById(pId).innerHTML="Test";
}anders{
Alert(xmlHttpReq.status+xmlHttpReq.responseText);
}
}
};
xmlHttpReq.send(null);
}
window.parent.frames["leftTree"].document.getElementById(pId).innerHTML=xmlHttpReq.responseText
Die Schreibmethode in der Hintergrundaktion ist wie folgt:
Zwei Aktualisierungsmethoden, eine Gesamtaktualisierung und eine Teilaktualisierung.