ในโครงการ เรามักจะพบกับการแบ่งส่วนหน้า ซึ่งเป็นอินเทอร์เฟซหลักที่พบบ่อยที่สุดของระบบหรือเว็บไซต์ หน้าหลักแบ่งออกเป็นการแนะนำระบบที่ด้านบน การแนะนำผู้เขียนที่ด้านล่าง เมนูฟังก์ชั่นระบบทางด้านซ้าย และอินเทอร์เฟซที่แสดงเมนูทางด้านขวา
เมื่อเจอการแบ่งหน้าประเภทนี้ สิ่งแรกที่ทุกคนนึกถึงคือเฟรมเซ็ต การใช้เฟรมเซ็ตเพื่อแยกหลายเฟรมเป็นวิธีง่ายๆ หากคุณไม่ชอบใช้เฟรมเซ็ต ผู้ที่ชอบการออกแบบส่วนหน้าอาจเลือก p splicing และลอยตัว ซึ่งจะทดสอบทักษะสไตล์ CSS ของคุณ
ครั้งนี้เราจะอธิบายปัญหาของการรีเฟรชบางส่วนเป็นหลัก ข้อกำหนดคือ: กรอบซ้าย, กรอบขวา
คงจะสงสัยว่ารีเฟรชแบบนี้ไม่มีปัญหาหรอก อย่างแท้จริง. ตอนนี้ใช้เฟรมเซ็ตเพื่อแยกสองเฟรมและอัปเดตแต่ละเฟรม เพียงอัปเดตและส่งเมนูที่แสดงในกรอบด้านขวา ไม่มีผลกับเฟรมด้านซ้าย
เพื่อความสะดวกในการทำความเข้าใจ Frame ด้านซ้ายเรียกว่า LeftFrame และ Frame ด้านขวาเรียกว่า RightFrame ถ้าฉันส่งหน้า RightFrame ฉันจำเป็นต้องอัปเดตหน้า LeftFrame [Dynamic] จะทำอย่างไร?
ในความเป็นจริงมันหมายถึงการอ่านข้อมูลจากฐานข้อมูลซ้ำ
หนึ่งในนั้นคือ modifiedMenu!showTreeMenu ถูกเปลี่ยนเส้นทางไปยังเพจ tree.jsp
ในโปรเจ็กต์ปัจจุบัน มีการใช้ struts2 ที่แผนกต้อนรับ เมื่อส่งข้อมูลในหน้าที่ถูกต้อง แนวคิดคือ: จากนั้นข้ามไปที่อินเทอร์เฟซหลักอีกครั้ง ซึ่งเทียบเท่ากับการอ่านข้อมูลซ้ำ แต่โหลดอินเทอร์เฟซหลักแล้ว จริงๆ แล้วจะแสดงในพื้นที่ด้านขวา เลยกลายเป็น LeftFrame สองอัน แม้แต่การเปลี่ยนการเปลี่ยนเส้นทางของ resultType ใน Struts2 ก็ไม่ทำงาน
ในที่สุด JS แบบธรรมดาก็สามารถแก้ไขปัญหาได้
หลังจากส่ง RightFrame ในหน้าขวาแล้ว ให้ใช้ JS เพื่ออัปเดต LeftFrame ทางด้านซ้าย ดังต่อไปนี้:
เหตุการณ์ onload ของเนื้อหาใน rightFrame:
window.parent.frames[ "leftTree"].location.reload()
เมื่อคุณอยู่ที่จุดสิ้นสุดของขบวนความคิด คุณสามารถลองเปลี่ยนขบวนความคิดของคุณได้ และคุณจะเห็นอนาคตที่สดใส
ข้อกำหนดมีดังนี้: หากคุณรีเฟรชหน้า RightFrame ที่ถูกต้อง ให้รีเฟรชเฉพาะบางส่วนของ LeftFrame ด้านซ้าย [รีเฟรชบาง p]
เมื่อพูดถึงการรีเฟรชบางส่วน ต้องคำนึงถึงการรีเฟรชบางส่วนของ Ajax ด้วย
จากนั้นเราใช้การใช้งานพื้นฐาน js Ajax ล้วนๆ:
ฟังก์ชั่น init(){
//ทำการรีเฟรชบางส่วน
var xmlHttpReq=createXmlHttpRequest();
//รับ URL เริ่มต้น เช่น struts2 action หรือ servlet หรือ jsp page
var url="success.jsp";
xmlHttpReq.open("GET",url,true);
//เนื่องจากคุณกำลังโทรแบบอะซิงโครนัส
//ดังนั้นคุณต้องลงทะเบียนตัวจัดการเหตุการณ์การเรียกกลับที่วัตถุ XMLHttpRequest จะเรียกใช้
xmlHttpReq.onreadystatechange=function(){
ถ้า(xmlHttpReq.readyState==4){
ถ้า(xmlHttpReq.status==200){
//ใช้ parent เพื่อรับ 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
วิธีการเขียนในการดำเนินการเบื้องหลังมีดังนี้:
วิธีรีเฟรชสองวิธี หนึ่งการรีเฟรชโดยรวม หนึ่งวิธี การรีเฟรชบางส่วน