`

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

    博客分类:
  • 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结合Velocity实现依据Word模板文件生成对应数据文件

    3. **读取模板文件**:使用Velocity的`ResourceLoader`加载Word模板文件,这通常涉及到文件系统的操作或者使用URL。 4. **填充数据**:在上下文中添加你需要的数据,例如数据库查询结果、服务器配置信息等。 5. **...

    JSP网页模板

    1. **分页需求**:在大量数据展示时,分页是常见的优化手段,它能提高用户体验,避免一次性加载过多数据导致页面卡顿。 2. **基本步骤**: - 计算总页数:根据数据总数和每页显示条数计算。 - 显示页码导航:通常...

    网页模板,,,JSP

    这个压缩包文件可能包含了一组预设计的JSP模板,这些模板可以极大地提高开发者的效率,因为他们可以直接使用或修改这些模板来快速构建网站的前端界面。 ASP(Active Server Pages)是微软公司的服务器端脚本环境,...

    jsp+servlet模板

    Servlet通常与JSP配合使用,JSP负责展示视图,而Servlet则处理业务逻辑和数据操作。 在“jsp+servlet 万能模板”中,常见的架构模式是MVC(Model-View-Controller)。模型(Model)代表数据和业务逻辑,视图(View...

    jsp精简后台模板

    在这个模板中,JavaScript可能被用来实现动态效果,如表单验证、导航菜单的响应式行为或数据的异步加载。例如,`nav.html`和`tab.html`可能会用到JavaScript来实现导航栏的交互功能。 MVC(Model-View-Controller)...

    servlet和jsp模板

    - 而修改JSP模板则可能涉及到页面布局的更改、添加新的动态内容或更新现有的表达式和脚本let。 6. **实战应用**: - 在实际项目中,开发者通常会创建一个Servlet来处理HTTP请求,然后根据需要转发或重定向到相应...

    Java Jsp 调用ireport动态模板打印

    - 创建` JasperDesign`对象,从JRXML文件加载报表设计。 - 使用`JasperCompileManager`编译报表设计为`JasperReport`对象。 - 填充报表数据,创建`JasperPrint`对象,这需要一个`Map`对象来存储报表参数和数据源...

    jsp文件转换成htm文件.zip

    在IT行业中,网页开发是一项重要的工作,而"jsp文件转换成htm文件.zip"这个压缩包提供的工具或教程可能就是帮助开发者实现将基于Java Server Pages (JSP) 的动态网页转换为静态HTML(HTM)文件的过程。这个转换过程...

    JSP蓝色模板

    开发人员可以根据实际需求对JSP模板进行定制,例如修改CSS以调整颜色、布局,或者添加新的JSP页面来满足特定功能。此外,还可以结合数据库技术(如MySQL),实现动态数据的展示和管理,使网站更具交互性。 **4. ...

    一个从数据库中查询数据的jsp动态网页实例

    6. **显示数据**:最终,JSP页面会根据需求将JavaBean中的数据插入到HTML模板中,生成动态的网页内容。 此实例对初学者来说具有很高的学习价值,因为它演示了JSP和JavaBean在实际项目中的协同工作方式。理解这一...

    JSP生成静态HTML页面的几种方法

    该方法的核心思想是从数据库中取出相应的数据,然后将其替换到模板文件中,从而生成静态 HTML 页面。下面是一个简单的示例代码: ```jsp ; charset=gb2312" import="java.util.*,java.io.*"%&gt; try { String ...

    JSP网页连接数据库增删改查模板

    在这个“JSP网页连接数据库增删改查模板”中,我们主要探讨的是如何使用JSP来实现对数据库的操作,包括添加(Add)、删除(Delete)、修改(Update)和查询(Query)数据。 首先,我们需要一个数据库来存储和管理...

    Jsp嵌入Flex 、Jsp Flash报表实现源码

    - **Flex组件嵌入**:JSP页面可以使用`&lt;object&gt;`或`&lt;embed&gt;`标签嵌入Flash内容,即Flex编译后的SWF文件。这样,Flex组件就能在网页中无缝展示,提供动态交互的报表体验。 - **事件处理**:Flex的交互事件(如点击、...

    JSP网页编程_幻灯片

    JSP文件由两部分组成:模板数据(Template Data)和JSP元素(JSP Elements)。模板数据是指JSP引擎不处理的部分,即标记……%&gt;以外的部分,例如代码中的HTML内容等,这些数据会直接传送到客户端的浏览器。JSP元素则...

    mvc+jsp做的增、删、改、查模板

    本项目“mvc+jsp做的增、删、改、查模板”是基于这一模式,使用Java语言,结合Servlet和JDBC(Java Database Connectivity)进行数据库操作,实现了基本的数据管理功能,包括增(Add)、删(Delete)、改(Update)...

    导出数据jsp

    本主题聚焦于如何在MyEclipse环境中使用JSP来实现用户登录验证,并将数据库中的信息导出到JSP页面上,同时进行分页处理。MyEclipse是一款强大的集成开发环境,特别适合Java Web应用的开发。 首先,我们需要了解JSP...

    jsp简单静态网页

    - **MVC模式**:在大型项目中,常使用Model-View-Controller架构,JSP作为视图(View),处理显示静态和动态数据。 **5. 开发工具** - **IDE支持**:如Eclipse、IntelliJ IDEA等提供对JSP开发的良好支持,包括...

    将jsp转化为静态的html文件输出

    在 Web 开发领域中,JSP(JavaServer Pages)是一种广泛使用的动态网页技术,它允许开发者在 HTML 文件中嵌入 Java 代码。然而,在实际应用中,当用户访问一个 JSP 页面时,服务器需要先执行 JSP 文件中的 Java 代码...

    使用JSP开发Web应用系统

    1. EL:简化了从JSP页面获取和设置数据的操作,语法简洁,如`${expression}`。 2. JSTL:提供了一系列标准标签,减少JSP中的脚本代码,提高可读性和可维护性,例如`&lt;c:forEach&gt;`, `&lt;fmt:formatDate&gt;`等。 六、MVC...

    ajax iframe jsp 无刷新上传文件.zip

    Ajax允许在后台与服务器交换数据并更新部分网页,而无需重新加载整个页面。然而,由于同源策略限制,直接使用Ajax进行文件上传并不容易,这时候Iframe就派上用场了。Iframe创建了一个独立的浏览上下文,可以在其中...

Global site tag (gtag.js) - Google Analytics