使用java開發web項目時,能夠在後端使用Servlet,前端使用JSP,下面就介紹一下這二者的配合使用。css
Servlet的概念其實很簡單,本質是一個聽從Servlet開發出來的java類。運行在 Web 服務器或應用服務器,它是做爲來自 Web 瀏覽器或其餘 HTTP 客戶端的請求和 HTTP 服務器上的數據庫或應用程序之間的中間層。html
圖片來自https://www.runoob.com前端
JSP(全稱Java Server Pages)是由 Sun Microsystems 公司倡導和許多公司參與共同建立的一種使軟件開發者能夠響應客戶端請求,而動態生成 HTML、XML 或其餘格式文檔的Web網頁的技術標準。JSP 技術是以 Java 語言做爲腳本語言的,JSP 網頁爲整個服務器端的 Java 庫單元提供了一個接口來服務於HTTP的應用程序。java
特色:能夠混雜Html和java代碼!web
其實JSP也是一種Servlet,JSP被編譯後是Servlet類文件。而一般JSP更注重頁面的顯示,而Servlet更注重邏輯控制。數據庫
一個完整的網絡請求:後端
下面是一個實際項目中的應用:瀏覽器
一個Servlet:服務器
//GetAllLesson package intergration.controller.lesson; import intergration.Service.LessonService; import intergration.entity.Lesson; import org.jdom.JDOMException; import org.xml.sax.SAXException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.xml.parsers.ParserConfigurationException; import java.io.IOException; import java.io.PrintWriter; import java.util.HashMap; import java.util.List; import java.util.Map; @WebServlet("/lesson/getAllLesson") //訪問Servlet的url public class GetAllLesson extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //super.doGet(req, resp); LessonService lessonService = new LessonService(); Map<String, Object> modelMap = new HashMap<String, Object>(); List<Lesson> lessonList = null; try { lessonList = lessonService.getAllLesson(); //從後臺獲得數據 } catch (ParserConfigurationException e) { e.printStackTrace(); } catch (SAXException e) { e.printStackTrace(); } catch (JDOMException e) { e.printStackTrace(); } modelMap.put("lesson", lessonList); if(lessonList == null){ modelMap.put("success", false); }else { modelMap.put("success", true); } req.setAttribute("lesson_list",lessonList); //將數據傳回前端 req.getRequestDispatcher("getAllLesson.jsp").forward(req, resp); //重定向 } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //super.doPost(req, resp); doGet(req, resp); } }
對應的 getAllLesson.jsp網絡
<%@ page import="java.util.List"%> <%@ page import="intergration.entity.Lesson" %><%-- Created by IntelliJ IDEA. User: Administrator Date: 2019/11/27 Time: 17:17 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>getAllLesson</title> <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/public.css" /> </head> <body> <div id = "left_table"> <form action="getLessonById" method="post"> <input type="text" name="id" value="" placeholder="課程號" /> <button type ="submit">查詢</button> </form> </div> <div id = "table" > <div class="add"> <form action="insertLesson" method="post"> <input type="text" name="id" value="" placeholder="ID" /> <input type="text" name="name" value="" placeholder="課程名" /> <input type="text" name="sex" value="" placeholder="教師" /> <input type="text" name="class" value="" placeholder="學時" /> <select name = "database"> <option value = "test1">test1</option> <option value = "test2">test2</option> </select> <button type ="submit">新增</button> </form> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th>ID</th> <th>課程名</th> <th>教師</th> <th>學時</th> </tr> </thead> <% //獲取數據 List<Lesson> lesson_list = (List<Lesson>)request.getAttribute("lesson_list"); %> <% for(Lesson lesson:lesson_list){ %> <tbody> <tr align="center"> <td> <%= lesson.getLessonId() %></td> <td> <%= lesson.getLessonName() %></td> <td> <%= lesson.getTeacherName() %></td> <td> <%= lesson.getHours() %></td> <td width="20%"> <span class="delete" ><a href="deleteLessonById?id=<%= lesson.getLessonId()%>">刪除</a> </span> <span class="edit" onclick="dis( <%= lesson.getLessonId() %>,'<%=lesson.getLessonName() %>',<%= lesson.getTeacherName() %>, <%= lesson.getHours() %>);">編輯</span> </td> </tr> </tbody> <% } %> </table> <div id="mask"> <div class="mask"> <div class="title"> 編輯 <span onclick = "nodis()"> X </span> </div> <div class="content"> <form action="updateLesson" method="post"> <input type="text" name="id" id = "update_id"value="" placeholder="ID" /> <input type="text" name="name" id = "update_name" value="" placeholder="課程名" /> <input type="text" name="sex" id = "update_sex"value="" placeholder="教師" /> <input type="text" name="class" id = "update_class"value="" placeholder="學時" /> <button type ="submit">更新</button> </form> </div> </div> </div> </div> </body> <script> function dis(Id,Name,Sex,Class) { event.stopPropagation(); document.getElementById("mask").style.display = "block"; document.getElementById("update_id").setAttribute("placeholder",Id); document.getElementById("update_name").setAttribute("placeholder",Name); document.getElementById("update_sex").setAttribute("placeholder",Sex); document.getElementById("update_class").setAttribute("placeholder",Class); document.getElementById("update_id").setAttribute("value",Id); document.getElementById("update_name").setAttribute("value",Name); document.getElementById("update_sex").setAttribute("value",Sex); document.getElementById("update_class").setAttribute("value",Class); } function nodis() { event.stopPropagation(); document.getElementById("mask").style.display = "none"; } </script> </html>