En los proyectos, a menudo nos encontramos con la segmentación de páginas, la interfaz principal más común de un sistema o sitio web. La página principal se divide en introducción del sistema en la parte superior, introducción del autor en la parte inferior, menú de funciones del sistema a la izquierda y la interfaz donde se muestra el menú a la derecha.
Cuando se encuentra con este tipo de página dividida, lo primero que piensa es en el conjunto de marcos. Usar el conjunto de marcos para dividir varios marcos es un método simple. Si no le gusta usar frameset, las personas a las que les gusta el diseño front-end pueden elegir p splicing y float, lo que pondrá a prueba sus habilidades de estilo CSS.
En esta ocasión explicamos principalmente el tema de la actualización parcial. Los requisitos son: marco izquierdo, marco derecho.
Debes estar preguntándote, no hay ningún problema con una actualización de esta manera. En efecto. Ahora use frameset para dividir los dos cuadros y actualizar cada uno. Simplemente actualice y envíe el menú que se muestra en el marco de la derecha. No tiene ningún efecto en el marco izquierdo.
Para facilitar la comprensión, el marco izquierdo se denomina Marco izquierdo y el marco derecho se denomina Marco derecho. Si envío la página Marco derecho, necesito actualizar la página Marco izquierdo [dinámico]. ¿Qué hacer?
De hecho, significa volver a leer los datos de la base de datos;
Entre ellos modificarMenu!showTreeMenu se redirige a la página tree.jsp
En el proyecto actual, struts2 se usa en la recepción Cuando se envían los datos en la página derecha, la idea es: luego saltar a la interfaz principal nuevamente, lo que equivale a volver a leer los datos, pero la interfaz principal está cargada. En realidad, se muestra en el área derecha, por lo que se convierten en dos LeftFrame. Incluso cambiar la redirección de resultType en Struts2 no funciona.
Finalmente, un simple JS resolvió el problema.
Después de enviar el RightFrame en la página derecha, use JS para actualizar el LeftFrame en la izquierda. como sigue:
El evento de carga del cuerpo en el marco derecho:
ventana.parent.frames[ "leftTree"].ubicación.reload()
Cuando esté al final de una determinada línea de pensamiento, puede intentar cambiarla y verá un futuro brillante.
Los requisitos son los siguientes: si actualiza la página del marco derecho derecho, solo actualice parte del marco izquierdo izquierdo [actualice una determinada p].
Cuando se trata de actualización parcial, debe venir a la mente la actualización parcial de Ajax.
Luego usamos la implementación básica pura de js Ajax:
función inicio(){
//Realizar actualización parcial
var xmlHttpReq=createXmlHttpRequest();
//Obtiene la URL de inicio, como la acción struts2 o el servlet o la página jsp
var url="éxito.jsp";
xmlHttpReq.open("OBTENER",url,verdadero);
//Debido a que estás realizando una llamada asincrónica,
// Entonces necesitas registrar un controlador de eventos de devolución de llamada al que llamará el objeto XMLHttpRequest
xmlHttpReq.onreadystatechange=función(){
si(xmlHttpReq.readyState==4){
si(xmlHttpReq.status==200){
//Utiliza parent para obtener una p en la página de la izquierda y luego cambia la apariencia de la pantalla
window.parent.frames["leftTree"].document.getElementById(pId).innerHTML="Prueba";
}demás{
alerta(xmlHttpReq.status+xmlHttpReq.responseText);
}
}
};
xmlHttpReq.send(nulo);
}
window.parent.frames["leftTree"].document.getElementById(pId).innerHTML=xmlHttpReq.responseText
El método de escritura en la acción en segundo plano es el siguiente:
Dos métodos de actualización, una actualización general; una actualización parcial;