电子商城后台系统（三）：整站只有一个html的实现

首先建一个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>

效果，访问首页

点击按钮：

电子商城后台系统（三）：整站只有一个html的实现

猜你喜欢