首先说明一下,我现在做的项目中前台用到的是jqm,利用的ajax向后台传递数值,返回的是json格式的数据。为了使大家一目了然,我把重要的代码张贴出来吧,并且个别地方有注释!
后台Action类:
listCodeHistory.jsp中
前台页面:
- <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>