電子商城後臺系統（三）：整站只有一個html的實現
阿新 • • 發佈：2019-01-12
首先建一個web專案，我這裡就叫tester
js資料夾下，引入jquery.js，再新建一個base.js，用來寫自己的js程式碼。static用來放html檔案，這些html檔案是用來讀取到index.html裡面的，在static下新建一個test.html。src下，新建一個包king.base，包下新建一個servlet——ReadFile
ReadFile.java程式碼，當然還要配訪問路徑的對映
package king.base; import java.io.File; import java.io.FileInputStream; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class ReadFile extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setContentType("text/html; charset=UTF-8"); //獲取前端傳過來的檔案路徑 String path = request.getParameter("path"); //將檔案路徑轉成絕對路徑 path = this.getServletContext().getRealPath(path); FileInputStream in = null; //一次性將檔案的內容讀取出來，響應給前端 try{ File file = new File(path); in = new FileInputStream(file); int length = (int) file.length(); byte[] content = new byte[length]; in.read(content); response.getWriter().println(new String(content)); }finally{ if(in != null){ in.close(); } } } }
base.js程式碼
/**接收三個引數 * path為檔案路徑 * 讀取檔案的內容解析到obj物件裡面 * append可以不傳，則預設為覆蓋obj裡的內容，如果傳true則為追加內容。 */ function readFile(path, obj, append){ $.ajax({ type:'GET', url:'/tester/readFile', data:'path='+path, success:function(data){ if(!append){ obj.empty(); } obj.append($(data)); }, error:function(data){ console.log(data); location.href='error.html'; } }); }
test.html程式碼
<h3>這是test檔案的內容</h3>index.html程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="js/jquery.js"></script> <script src="js/base.js"></script> </head> <body> <header> <input type="button" onclick="readFile('static/test.html', $('#content'))" value="按鈕" /> </header> <div id="content">這是正文部分</div> <footer>這是頁面底部</footer> </body> </html>
效果，訪問首頁
點選 按鈕：
