ฉันควรทำอย่างไรเพื่อโหลดหน้า JSP ในแท็ก ‹div› ในหน้า JSP อื่นผ่าน Servlet

นี่คือปัญหา ฉันมีเพจ JSP 3 หน้า (main.jsp, manageClasses.jsp และ insertDates.jsp) และ 2 Servlets (AttendanceServlet และ ManageClassServlet) หน้าหลักจะโหลดหน้าอื่นๆ ที่อยู่ในนั้นเอง

โดยพื้นฐานแล้วสิ่งที่ฉันต้องการทำคือเมื่อเรียก AttendanceServlet ฉันต้องการโหลด insertDates.jsp ลงใน main.jsp แทนที่เนื้อหาก่อนหน้าซึ่งโหลดโดย ManageClassServlet

main.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
        <link rel="stylesheet" href="/thcss/stylesheetprincipal.css">
        <script type="text/javascript">  
            $(document).ready(function() {
            $("#gt").click(function(){
                $("#internal").load('ManageClassServlet');
            });
        });
        </script>
        <title>Main</title>
    </head>
    <body>
        <div id="nav">
            <ul>
                <li><a href="/thjavascript:void(0)" id="gt" title="manage">MANAGE     CLASSES</a></li>  
                <li><a href="/thlogout.jsp" title="exit">EXIT</a></li>
            </ul>
        </div>    
        <div id="forms">
            <div id="internal">
            </div>
        </div>
    </body>
</html>

จัดการClassServlet

@WebServlet(name = "ManageClassServlet", urlPatterns = {"/ManageClassServlet"})
public class ManageClassServlet extends HttpServlet {

    @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, java.io.IOException {
        HttpSession session = request.getSession();
        String[][] tableMatrix = getTableMatrix(professorClasses);
        session.setAttribute("tableMatrix", tableMatrix);
        response.sendRedirect("manageClasses.jsp");
    }
}

จัดการClasses.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Manage Classes</title>
    </head>
    <body>
        <form action="AttendanceServlet" method="post">
            <table id="classTable" border="2">
                <TR> <TH>&nbsp;</TH> <TH>Subject</TH>  <TH>Year/Semester</TH>  <TH>Frequencias</TH> </TR>
                <c:forEach items="${matrixTable}" var="row" varStatus="i">
                    <tr>
                        <TH>${row[0]}</TH>
                        <c:forEach begin="1" end="2" items="${row}" var="value">
                            <td>${value}</td>
                        </c:forEach>
                        <td> <button type="submit" name="Ver" value="${row[3]}">See    </button> </td>
                    </tr>
                </c:forEach>
            </table>
        </form>
    </body>
</html>

ฉันพยายามใช้ out Object เพื่อส่งหน้า jsp แต่มันไม่ทำงาน

เซิร์ฟเวอร์การเข้าร่วม

@WebServlet(name = "AttendanceServlet", urlPatterns = {"/AttendanceServlet"})
public class AttendanceServlet extends HttpServlet {

    @Override
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, java.io.IOException {
        try {
            ClassDAO classDao = new ClassDAO();
            Integer idClass = Integer.parseInt(request.getParameter("See"));
            ClassBean class = classDao.searchClassBean(idClass);
            if (class.getDateClasses() == null) {
                String path = "/WEB-INF/jsp/main.jsp";
                PrintWriter out = response.getWriter();
                out.println("<script type=\"text/javascript\">");
                out.println("$(document).ready(function() {");
                out.println("$(\"#internal\").load('insertDates.jsp');");
                out.println("});");
                out.println("</script>");
                RequestDispatcher dispatcher = request.getRequestDispatcher(path);
                dispatcher.include(request, response);
            }
        } catch (SQLException ex) {
            ex.printStackTrace();
        }
    }
}

person xeko    schedule 06.12.2011    source แหล่งที่มา


คำตอบ (2)


ต้องใช้เวลาสักระยะหนึ่งก่อนที่ฉันจะสามารถเข้าใจวิธีการโหลด การเปลี่ยนเส้นทาง และการส่งมุมมอง (ย่อย) แปลกๆ ในตัวอย่างนี้ได้ เป็นการยากที่จะระบุสาเหตุของปัญหาของคุณ อย่างน้อยก็ชัดเจนว่าคุณกำลังใช้ jQuery มากเกินไป ในการเริ่มต้น หากไคลเอนต์ปิดการใช้งาน JS แสดงว่าหน้าหลักของคุณไร้ประโยชน์โดยสิ้นเชิง

เพื่อให้บรรลุสิ่งที่คุณต้องการ ก่อนอื่นคุณต้องแยกความรับผิดชอบฝั่งไคลเอ็นต์ออกจากความรับผิดชอบฝั่งเซิร์ฟเวอร์ เลิกสนใจ jQuery ซักพักแล้วทำให้มันทำงานกับองค์ประกอบ <form> และ/หรือ <a> ปกติและ <jsp:include> ก่อน หากคุณเก็บโค้ด Java ทั้งหมด ไว้ในคลาส Servlet และเก็บ ทั้งหมด HTML/CSS (และ JS ใดๆ ในอนาคต) ไว้ในไฟล์ JSP โค้ดนั้นเกือบจะเขียนเอง

สุดท้ายนี้ เมื่อคุณทำงานได้เต็ม 100% โดยไม่ต้องใช้โค้ด jQuery/JS เลย คุณก็สามารถ ปรับปรุง ประสบการณ์ฝั่งไคลเอ็นต์ได้โดยการเพิ่ม jQuery ในลักษณะที่ ไม่สร้างความรำคาญ . เช่น. จะต้องไม่เปลี่ยนแปลงฟังก์ชันฝั่งเซิร์ฟเวอร์ (ดังที่คุณมีในเซิร์ฟเล็ตและ JSP) (นอกเหนือจากการตรวจสอบในที่สุดว่าเป็นคำขอปกติหรือแบบ ajax เพื่อให้สามารถให้การตอบสนองที่เหมาะสมยิ่งขึ้น) jQuery จะต้องเพิ่มตัวจัดการเหตุการณ์ในระหว่างการโหลดเอกสารและเปลี่ยนพฤติกรรมของเอกสารในลักษณะที่จะปรับปรุงประสบการณ์ผู้ใช้ (อีกครั้งโดยไม่ต้องเปลี่ยนโค้ดฝั่งเซิร์ฟเวอร์) jQuery ไม่ใช่กรอบงาน MVC ในตัวมันเองหรืออะไรบางอย่าง และไม่ คุณไม่ควรปล่อยให้เซิร์ฟเล็ตปล่อยโค้ด jQuery ใดๆ สิ่งนี้ไม่สมเหตุสมผล

ขออภัยอีกครั้งหากฉันไม่มีคำตอบที่พร้อมสำหรับเรื่องนี้ แต่หวังว่าคุณจะเข้าใจในตอนนี้ว่าฉันไม่สามารถทำเช่นนั้นได้ ขอขอบคุณสำหรับสไตล์โค้ดที่สะอาดตาและการเริ่มต้นที่ดีกับ Servlet/JSP ฉันจะพิมพ์เฉพาะองค์ประกอบ <TH><TR> เหล่านั้นให้เล็กลงเท่านั้น

person BalusC    schedule 06.12.2011
comment
ฉันเขียนโค้ดทั้งหมดใหม่ตามคำแนะนำของคุณและเดาว่าอย่างที่คุณบอกว่าโค้ดเกือบจะเขียนเองแล้ว ตอนนี้ฉันสามารถรักษาความเร็วให้เร็วขึ้นได้มาก โดยไม่ติดขัดมากเกินไป อย่างที่คุณสังเกตเห็น ฉันไม่ใช่นักพัฒนาที่มีประสบการณ์ และนี่เป็นครั้งแรกที่ฉันจัดการกับ js ถือเป็นเกียรติสำหรับฉันที่ได้รับการตอบรับจากโปรแกรมเมอร์ที่ยอดเยี่ยมเช่นนี้ และถ้าไม่ใช่คำตอบที่พร้อมจะพอดีก็เพราะว่าไม่สามารถเป็นได้ ขอบคุณมาก! - person xeko; 07.12.2011

โดยปกติ คุณจะดำเนินการนี้ผ่านการส่งแบบฟอร์ม Ajax ซึ่งเป็นวิธีเดียวกับที่คุณโหลดแบบฟอร์ม แต่ผ่านทางการส่ง (โดยทั่วไปคือ $.post)

เซิร์ฟเล็ต AttendanceServlet จะส่งต่อไปยัง insertDates.jsp ตามปกติ ส่วนตัวจัดการ success ของการส่ง Ajax จะอัปเดต #internal div ด้วยผลลัพธ์ของการส่ง Ajax

ฉันยังไม่ชัดเจนว่าทำไมคุณถึงย้ายออกจากกลไก jQuery ปกติเมื่อถึงเวลาส่งแบบฟอร์ม บางทีฉันอาจขาดอะไรบางอย่างไป แต่ฉันไม่สามารถบอกได้ว่าคุณพยายามทำอะไร

person Dave Newton    schedule 06.12.2011