في المشاريع، غالبًا ما نواجه تجزئة الصفحات، وهي الواجهة الرئيسية الأكثر شيوعًا للنظام أو موقع الويب. تنقسم الصفحة الرئيسية إلى مقدمة النظام في الأعلى، ومقدمة المؤلف في الأسفل، وقائمة وظائف النظام على اليسار، والواجهة حيث يتم عرض القائمة فعليًا على اليمين.
عند مواجهة هذا النوع من الصفحات المنقسمة، فإن أول ما يفكر فيه الجميع هو مجموعة الإطارات. يعد استخدام مجموعة الإطارات لتقسيم إطارات متعددة طريقة بسيطة. إذا كنت لا ترغب في استخدام مجموعة الإطارات، فيمكن للأشخاص الذين يحبون تصميم الواجهة الأمامية اختيار p splicing وfloating، مما سيختبر مهاراتك في أسلوب CSS.
هذه المرة نشرح بشكل أساسي مسألة التحديث الجزئي. المتطلبات هي: الإطار الأيسر، الإطار الأيمن.
يجب أن تتساءل، لا توجد مشكلة في التحديث بهذه الطريقة. بالفعل. استخدم الآن مجموعة الإطارات لتقسيم الإطارين وتحديث كل منهما. ما عليك سوى تحديث القائمة المعروضة في الإطار الموجود على اليمين وإرسالها. ليس له أي تأثير على الإطار الأيسر.
لسهولة الفهم، يُشار إلى الإطار الأيسر باسم LeftFrame، ويُشار إلى الإطار الأيمن باسم RightFrame؛ إذا قمت بإرسال صفحة RightFrame، فأنا بحاجة إلى تحديث صفحة LeftFrame [الديناميكية]. ما يجب القيام به؟
في الواقع، هذا يعني إعادة قراءة البيانات من قاعدة البيانات؛
من بينها تعديل القائمة!showTreeMenu يتم إعادة توجيهه إلى صفحة Tree.jsp
في المشروع الحالي، يتم استخدام struts2 في مكتب الاستقبال عند إرسال البيانات الموجودة على الصفحة اليمنى، والفكرة هي: ثم الانتقال إلى الواجهة الرئيسية مرة أخرى، وهو ما يعادل إعادة قراءة البيانات، ولكن الواجهة الرئيسية المحملة. يتم عرضه فعليًا في المنطقة اليمنى، بحيث يصبح إطارين LeftFrame. حتى تغيير إعادة توجيه resultType في Struts2 لا يعمل.
وأخيرا، حل JS بسيط المشكلة.
بعد إرسال الإطار الأيمن على الصفحة اليمنى، استخدم JS لتحديث الإطار الأيسر على اليسار. على النحو التالي:
حدث التحميل للجسم في rightFrame:
window.parent.frames[ "leftTree"].location.reload()
عندما تكون في نهاية قطار أفكار معين، يمكنك محاولة تغيير قطار أفكارك، وسوف ترى مستقبلًا مشرقًا.
المتطلبات هي كما يلي: إذا قمت بتحديث صفحة RightFrame اليمنى، فقم فقط بتحديث جزء من LeftFrame الأيسر [قم بتحديث صفحة معينة].
عندما يتعلق الأمر بالتحديث الجزئي، يجب أن يتبادر إلى ذهنك تحديث Ajax الجزئي.
ثم نستخدم التنفيذ الأساسي لـ js Ajax:
وظيفة الحرف الأول () {
// إجراء تحديث جزئي
var xmlHttpReq=createXmlHttpRequest();
// احصل على عنوان URL للبدء، مثل إجراء struts2 أو servlet أو صفحة jsp
فار url="success.jsp";
xmlHttpReq.open("GET",url,true);
// لأنك تجري مكالمة غير متزامنة،
// لذلك تحتاج إلى تسجيل معالج حدث رد الاتصال الذي سيستدعيه كائن XMLHttpRequest
xmlHttpReq.onreadystatechange=function(){
إذا (xmlHttpReq.readyState==4){
إذا (xmlHttpReq.status==200){
// استخدم الأصل للحصول على حرف p في الصفحة اليسرى، ثم قم بتغيير مظهر العرض
window.parent.frames["leftTree"].document.getElementById(pId).innerHTML="Test";
}آخر{
تنبيه(xmlHttpReq.status+xmlHttpReq.responseText);
}
}
};
xmlHttpReq.send(null);
}
window.parent.frames["leftTree"].document.getElementById(pId).innerHTML=xmlHttpReq.responseText
طريقة الكتابة في إجراء الخلفية هي كما يلي:
طريقتان للتحديث، تحديث شامل والآخر تحديث جزئي؛