利用AJAX为JSP页面传递一个包含了若干对象的List集合

首先说明一下，我现在做的项目中前台用到的是jqm，利用的ajax向后台传递数值，返回的是json格式的数据。为了使大家一目了然，我把重要的代码张贴出来吧，并且个别地方有注释！
前台页面：

<link rel="stylesheet"
			href="${pageContext.request.contextPath }/js/jquery.mobile-1.0.1.min.css">
		<script src="${pageContext.request.contextPath }/js/jquery-1.6.4.min.js"></script>
		<script type="text/javascript">
		$(function(){ //在页面加载后激活函数   
			 $("#history").bind("click", function() {  //为DOM对象中属性id="history"的元素绑定click事件，执行回调函数
				 $.ajax({
					 type:"post",//以post方式向后台提交数据
				     url:"${pageContext.request.contextPath}/lcecodelog/listL_cecodelog.action?uid=-6196080717979582463",//提交到后台的地址
				     data:{isAjax:true},//需要传递的数据 也可以这样写data：isAjax=true,username="Tom", 注意data是键值对应的数据
					 dataType:"json",//返回数据的格式是json
					 success:function(data){//后台代码执行成功后，执行的回调函数
						 console.log(data.list[0].exname);//在控制台上输出，可以测试一下是否返回正确数据.注意：这里的list是和后台中的放在data中的list一样的。
						 $.mobile.changePage("${pageContext.request.contextPath}/right/scancodehistory/listCodeHistory.jsp","slideleft", false, false); 
						 //$.mobile.changePage()是jqm API的方法
					 }
				 });
				});
			}); 
		</script>
		<script
			src="${pageContext.request.contextPath }/js/jquery.mobile-1.0.1.min.js"></script>

后台Action类：

	//使用的是struts2,返回的是String类型的方法。
	public String listL_cecodelog() {
		//注意：isAjax()和printJSONData()都是我写好的封装类，在这里就直接拿过来调用了。
		
		Long uid = getParameterLong("uid");// 从url中获取参数uid 
		
		List<L_cecodelog> list = lcecodelogDAO.ListL_cecodelog(uid); 
		
		try {
			if(!isAjax()){//判断是不是ajax请求
				return null;
			}
			JSONObject data = new JSONObject();
			data.accumulate("list", list);//注意：这个list的名字和前台页面中list的名字需要一致。
			setSession("list", list);//之所以把list放在session会话中是因为需要在另一个页面循环list输出结果。
			printJSONData(data);
		} catch (ServletException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		} 
		return null; 
	}

listCodeHistory.jsp中

//在这里可以循环放在session中的list
<c:forEach items="${list }" var="code" varStatus="index">
						<li>
							<a
								href="${pageContext.request.contextPath}/lcecodelog/findT_exhibitByExid.action?exid=${code.exid}&id=${code.id}">${code.exid}
								${code.exname}</a><span class="ui-li-count">${code.datetime}</span>
						</li>
					</c:forEach>



</body>
	<%session.removeAttribute("list"); %>//为了信息安全，利用完session会话中的list之后，需要移除会话。
</html>

就这些了，希望能给大家一点小帮助吧！

评论

2 楼 fengyunlouyanyu 2016-01-12  

   

1 楼 xuxiaoyu 2013-02-22