背景:
页面的某一部分是订单列表,如果在加载页面的时候将列表同步渲染出来不利于交互。所以想通过ajax异步请求的方式请求并渲染好局部页面后添加到页面中的某一个的位置。
java代码如下:
@RequestMapping("/member/msg/orderList") public String orderList(MessageVo messageVo, PageVo pageVo, ModelMap map) { LoginVo loginVo = SessionHelpUtils.getLoginVo(); //判断是否登陆 if (null==loginVo){ return "redirect:/login/login.html"; } List<MyOrderVo> list = orderService.getMemberOrderList(loginVo.getId()); map.put("orderList",list); return "web/front/member/msg/orderList";}
页面代码如下:
<div> <h3 style="padding-bottom: 10px">最新订单</h3> <hr/> <div id="searchResult"> </div></div>
// 获取最新订单相关的数据 $.ajax({ type: "POST", url: ctx + "/member/msg/orderList.ajax", success: function (data) { // data为渲染后的jsp内容 $("searchResult").html(data); } });
要注意的地方:
1、接口Action方法上不要有@ResponseBody注解,否则页面的data只是jsp的路径而非页面内容;
2、返回的jsp路径注意大小写,IDEA编译器在大小写不一致时也能够跳转但是不能访问;
3、jsp页面内部对数据的处理要正确,如果引用了不存在的字段也会引发500错误。
教训:
debug的时候除了用好对比法,还要积极使用单一变量法。