背景:
頁面的某一部分是訂單列表,如果在加載頁面的時候將列表同步渲染出來不利於交互。所以想通過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的時候除了用好對比法,還要積極使用單一變量法。
