Ajax把后台集合输出到前台页面

NobleBaron

浏览: 43927 次

最近访客更多访客>>

m635674608

猪猪猪1111

ylm_v

訫随念

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Ajax 集合输出前台搜索 jquery

问题：用ajax把后台的集合输出到前台页面

1.看到网上用JSON的,感觉稍微也是有点麻烦

2.利用DWR把后台的集合取出很简单,难点在于,怎么把大量的数据漂亮的输出出来,和在js中大量的拼凑代码（集合数据和html标签的拼凑）,显然更麻烦,而且更容易出错

解决：利用jquery

思路：

1.和平常输出集合是一样的,首先把集合输出到一个页面,这个页面只负责显示集合输出信息

2.然后利用jquery把这个页面追加到我们的搜索页面

下文中出现的几个页面：

1.employee_info.jsp，搜索页面，利用下拉列表搜索和下面部分显示员工信息（ajax）

2.employeeInfo.jsp承载输出的集合,这个页面口ajax追加到employee_info.jsp的id为results的DIV中

3.用到技术struts2

说明：

其实用什么技术后去后台集合都一样,只要把请求的资源改下就OK

代码：

1.我们的搜索页面employee_info.jsp

		<table>
			<tr>
				<td>
					请选择员工所在部门：
				</td>
				<td>
				<!-- 这是一个下拉列表,在内容改变的时候提交事件 -->
					<select name="employee.department.departmentId"
						onchange="getDepar(this.value)">
						<c:forEach items="${departmentList}" var="department">
							<option value="${department.departmentId}">
								${department.departmentName}
							</option>
						</c:forEach>
					</select>
				</td>
				<td>
				</td>
			</tr>
		</table>
		<!--负责接收代码的DIV-->
		<div id="results">
		</div>

2.js函数页面

	function getDepar(id) {
		//把前面查出来的数据清掉
		$("#results").html(""); 
		$.ajax( {
			//请求的资源,我用的struts2,用什么都一样html也可以
			url : "employeeAction_getByDep.action?departmentId=" + id,
			cache : false,
			success : function(html) {
			//把结果页面追加到id为results的DIV
				$("#results").append(html);
		}
		});
	}

3.后台获得员工集合处理

	public String getByDep() {
		//获得该部门的员工的集合
		employeeList = employeeService.getByDepartment(departmentId);
		//获得集合后跳到的地址,这里的employeeInfo.jsp和employee_info.jsp不是一个页面
		resultLocation = "employeeInfo.jsp";
		return "goto";
	}

4.集合显示页面employeeInfo.jsp（与employee_info.jsp不是一个页面）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">
		<title>这是搜索部门下的员工列表的输出页面,这个标题不会输出,它只会在搜索页面中的一个标签(我用的DIV)中显示</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
	</head>
	<body>
		<c:if test="${empty requestScope.employeeList}">此部门没有员工</c:if>
		<c:if test="${requestScope.employeeList ne null}">
			<table>
				<tr>
					<td>
						登录名
					</td>
					<td>
						姓名
					</td>
					<td>
						职位
					</td>
					<td>
						所在部门
					</td>
					<td>
						状态
					</td>
				</tr>
				<c:forEach items="${requestScope.employeeList}" var="employee">
					<tr>
						<td>
							${employee.employeeLoginName }
						</td>
						<td>
							${employee.employeeName }
						</td>
						<td>
							${employee.roler.rolerName }
						</td>
						<td>
							${employee.department.departmentName }
						</td>
						<td>
							${employee.employeeState.employeeStateName }
						</td>
					</tr>
				</c:forEach>
			</table>
		</c:if>
	</body>
</html>

提高：

到此为止,基本上可以完成功能了,但是有个小BUG,就是在第一次访问搜索页面（employee_info.jsp）的时候是没有数据显示的,为了提高友好性,把employeeInfo.jsp里的显示数据的代码复制到employee_info.jsp页面的id="results"的DIVd中一份

5.我们会把在第一次访问搜索页面的时候把第一个部门的员工也查出来

public String loadDep() {
		departmentList = departmentService.getAll();
		employeeList = employeeService.getByDepartment(1);// 查询部门id为1的员工,因为搜索页面默认显示的第一个就是部门ide为1的
		department = new Department(1);
		resultLocation = "employee_info.jsp";
		return "goto";
	}

6.employee_info.jsp添加代码

<!--负责接收代码的DIV-->
		<div id="results">
			<!-- div里的代码与接收数据的员工列表完全一样,只为第一次请求搜索部门员工的时候显示第一个部门的数据 -->
			<c:if test="${empty requestScope.employeeList}">此部门没有员工</c:if>
			<c:if test="${requestScope.employeeList ne null}">
				<table>
					<tr>
						<td>
							登录名
						</td>
						<td>
							姓名
						</td>
						<td>
							职位
						</td>
						<td>
							所在部门
						</td>
						<td>
							状态
						</td>
					</tr>
					<c:forEach items="${requestScope.employeeList}" var="employee">
						<tr>
							<td>
								${employee.employeeLoginName }
							</td>
							<td>
								${employee.employeeName }
							</td>
							<td>
								${employee.roler.rolerName }
							</td>
							<td>
								${employee.department.departmentName }
							</td>
							<td>
								${employee.employeeState.employeeStateName }
							</td>
						</tr>
					</c:forEach>
				</table>
			</c:if>
		</div>

这样就OK了。

转载请注明出处：http://noblebaron.iteye.com/blog/1632229

分享到：