首先建一个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>
效果,访问首页
点击 按钮: