使用JSP模板文件加载页面数据

进行页面展示时，通过有两种方式：

一种为传统的action，从action中查找数据再传到JSP页面上用JSTL进行展示；

第二种使用ajax从action中获取数据，再到页面上用JS拼接HTML或者在后台拼接完成了通过ajax返回到前台。

两种方法的缺点都比较明显：

第一种不适合于局部刷新，更也不适合于频繁刷新，也就是ajax的优点。

第二种可以局部刷新，但是需要拼接HTML，无论在后台还是在js中拼接HTML都比较麻烦。

所以呢，可以将以上两行方法结合起来使用：

直接调转到页面，通过ajax加载数据，将action中返回的数据传递到另一个模板JSP文件中进行加载，加载完成的数据会自动返回到ajax的回调函数中。

1、展示页面(index.jsp)：也就是直接请求的页面，在这个页面上显示数据。页面结构很简单，就一个div用来包装数据。

<body style="overflow:auto;">
	<h2>使用JSP模板文件加载页面数据</h2>
	<div id="tableDiv"></div>
</body>

然后添加一个ajax方式用来请求数据：

$(function(){
	$.ajax({
		type:"post",
		async:false, 
		data:{"time":new Date().getTime()},
		dataType:"html",
		url:"tools!loadData.action",
		error:function(XMLHttpRequest, textStatus, errorThrown) {
			 //alert(XMLHttpRequest.status);
			 //alert(XMLHttpRequest.readyState);
			 //alert(textStatus);
			 alert("加载错误，错误原因：\n"+errorThrown);
		},
		success:function(data){
			//alert(data);
			var data2 = data.toString();
			if((data2+"").indexOf("fail")>-1){//说明是错误信息
				data2 = data2.replace("fail","");
			}else{
				$("#tableDiv").html(data);
			}
		}
   });
});

这里有个注意点：就是ajax的dataType类型必须为html，写成text或者json或者xml都会报错。

2、模板页面(template.jsp)：数据加载的页面，加载完成后将数据返回到index.jsp。页面结构可以随便定义。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<table cellspacing="0" cellpadding="0" border="0" width="100%" align="center" id="infoTable">
	<tr class="firstTr">
		<td>序号</td>
		<td>内容1</td>
		<td>内容2</td>
		<td>内容3</td>
		<td>内容4</td>
	</tr>    
    <c:forEach items="${table1List }" var="table1" varStatus="order">
    	<tr>
    		<td>${order.index+1}</td>
    		<td>${table1.field1 }</td>
    		<td>${table1.field2 }</td>
    		<td>${table1.field3 }</td>
    		<td>${table1.field4 }</td>
    	</tr>
    </c:forEach>
</table>

注意点：页面中除了添加需要的page、tablib等指令，其他的都不要添加，连HTML的基本标签如html、body等都不需要添加了，要是添加了就等于在index.jsp的tableDiv中添加了一个信息页面。

3、action主要代码：

List<Table1> table1List = t1dao.findAll();
if(table1List!=null && table1List.size()>0){
	request.setAttribute("table1List", table1List);
	request.getRequestDispatcher("/template.jsp").forward(request, response);
}

关键代码是这句： request.getRequestDispatcher("/template.jsp").forward(request, response);

这句大家都很熟悉，就是页面跳转，没错就是让跳转到模板jsp页面中让它加载数据。

当然对于ajax，大家都知道一定会有一句response.getWriter().write(result);用来告知结果。在这种跳转的情况下result中的值也会被带到页面上，但是回调函数success方法返回的结果中却没有它。通过firebug的网络模式看到的“响应”结果却只有这个result还没有页面数据，这究竟是为啥我就不琢磨了。

至此，使用jsp模板文件加载数据的流程就完成了。用过之后会觉得ajax原来还有这么个怪脾气，JSP原来这么强大的！

使用JSP模板文件加载页面数据

猜你喜欢