【springmvc向jsp返回List，不同jsp进行遍历，不使用ajax请求和使用ajax请求的对比的若干问题的分析】
Mapper和Service/数据库等省略，请自行脑补
Controller: 使用同一个Controller做实验，只是页面的跳转不一样，返回的还是List
---------------------------------------------------------------------------------------------------------
第一种情况：不使用ajax请求，发起请求和接收返回数据的页面是同一个页面
（1）发起请求的jsp： system目录下的role.jsp
<a href="${pageContext.request.contextPath}/system/role/findRoleList">获取角色列表</a>
（2）Controller：RoleController.java
// 获取角色列表
@RequestMapping(value="/findRoleList", method=RequestMethod.GET)
public ModelAndView findRoleList() {
ModelAndView mv = new ModelAndView();
List<TbRole> roleList = roleService.findRoleList();
mv.addObject("roleList", roleList);
mv.setViewName("system/role");
return mv;
}
（3）接收数据的jsp： system目录下的role.jsp
<c:if test="${roleList == null }">
<h3>很遗憾，没有查询到任何结果！</h3>
</c:if>
<c:if test="${roleList != null }">
<table border="1px;" cellpadding="10px;" cellspacing="10px;">
<tr>
<td>角色id</td>
<td>角色名称</td>
<td>全部权限</td>
<td>权限描述</td>
</tr>
<c:forEach items="${roleList }" var="role">
<tr>
<td>${role.roleid }</td>
<td>${role.rolename }</td>
<td>${role.authids }</td>
<td>${role.description }</td>
</tr>
</c:forEach>
</table>
</c:if>
（4）效果图 and 结论：
请求之前：
请求之后：
结论一：
不使用ajax请求，发起请求和接收数据的页面是同一个jsp页面，能正常接收List集合，并且遍历，同时，页面呈现出刷新的现象，URL不变
第二种情况：不使用ajax请求，发起请求和接收返回数据的页面不是同一个页面
（1）发起请求的jsp：system下的role.jsp
<a href="${pageContext.request.contextPath}/system/role/findRoleList">获取角色列表</a>
（2）Controller：RoleController.java
// 获取角色列表
@RequestMapping(value="/findRoleList", method=RequestMethod.GET)
public ModelAndView findRoleList() {
ModelAndView mv = new ModelAndView();
List<TbRole> roleList = roleService.findRoleList();
mv.addObject("roleList", roleList);
mv.setViewName("system/menu");
return mv;
}
（3）接收数据的jsp：system目录下的menu.jsp
在menu.jsp页面同样的遍历这个List集合，代码一样
（4）效果图 and 结论：
请求之前：
请求之后：
结论二：
不使用ajax请求，发起请求和接收返回数据的页面不是同一个页面，可以正常接收List集合，并且遍历，页面也同样呈现出刷新的现象，但是请求的超链接
不见了，原因是请求页面和接收数据的页面不是同一个页面，URL不变。
第三种情况：使用ajax请求，发起请求和接收返回数据的页面是同一个页面
（1）发起请求的jsp：system目录下的role.jsp
<a href="javascript:void(0);" onclick="findRoleListByAjax();">获取角色列表</a>
<script type="text/javascript">
function findRoleListByAjax() {
$.ajax({
type: "GET",
url: "${pageContext.request.contextPath}/system/role/findRoleList",
cache: false,
success: function(data) {
alert("成功！");
},
error: function(data) {
alert("失败！");
}
});
}
</script>
（2）Controller：
// 获取角色列表
@RequestMapping(value="/findRoleList", method=RequestMethod.GET)
public ModelAndView findRoleList() {
ModelAndView mv = new ModelAndView();
List<TbRole> roleList = roleService.findRoleList();
mv.addObject("roleList", roleList);
mv.setViewName("system/role");
return mv;
}
（3）接收数据的jsp：role.jsp
一样的遍历List集合
（4）效果图 and 结论：
请求之前：
请求之后：
点击“确定”之后：页面显示没有查询结果！
F12查看：
结论三：
使用ajax请求，发起请求和接收返回数据的页面是同一个页面，请求成功！但是页面没有获取到数据，后台已经正确返回了List集合，
查看请求和响应头，发现请求和响应都成功了！而且浏览器的preview中也可以看到页面遍历的List列表，但是页面就是不显示出来！同时，页面不再呈现
刷新的现象，URL不变。
这个问题的解决方法：
这个问题原因是使用ajax请求，返回的数据只能由ajax接收，而jsp页面不能解析，所以解决方法：
后台返回json数据，json数据可以使用js来解析，动态拼接表单：
修改Controller：
// 获取角色列表
@RequestMapping(value="/findRoleList", method=RequestMethod.GET)
@ResponseBody
public List<TbRole> findRoleList() {
List<TbRole> roleList = roleService.findRoleList();
return roleList;
}
定义一个js脚本：
<script type="text/javascript" src="${pageContext.request.contextPath}/ui/myJs/role.js"></script>
function findRoleListByAjax() {
$.ajax({
type : "GET",
url : "system/role/findRoleList",
cache : false,
success : function(data) {
var roleList = data;
var roleTableStr = "";
if (roleList == null || roleList.length <= 0) {
roleTableStr += "<h3>很遗憾，没有查询到任何结果！</h3>";
return false;
}
roleTableStr += '<table class="table table-striped">';
roleTableStr += '<thead><tr><td style="font-weight: bold;">序号</td><td style="font-weight: bold;">权限编号</td><td style="font-weight: bold;">权限名称</td><td style="font-weight: bold;">所有权限</td><td style="font-weight: bold;">权限描述</td></tr></thead>';
$.each(roleList, function(i) {
roleTableStr += '<tr><td>'+(i+1)+'</td><td>'+roleList[i].roleid+'</td><td>'+roleList[i].rolename+'</td><td>'+roleList[i].authids+'</td><td>'+roleList[i].description+'</td></tr>';
});
roleTableStr += '</table>';
$("#roleListDiv").html(roleTableStr);
},
error : function() {
alert("请求或响应失败！");
}
});
}
role.jsp:
<div id="page-wrapper"> <a href="javascript:void(0);" onclick="findRoleListByAjax();">获取角色列表</a> <hr> <div id="roleListDiv"/> </div>
效果图：
这里顺便把删除的功能也实现了：
role.js:
// 全局roleList变量，方便不同方法调用
var roleList = [];
// 获取角色列表
function findRoleListByAjax() {
$.ajax({
type : "GET",
url : "system/role/findRoleList",
cache : false,
success : function(data) {
roleList = data;
listRole();
},
error : function() {
alert("请求或响应失败！");
}
});
}
// 根据角色id删除角色
function deleteRoleById(roleId) {
$.ajax({
type: "GET",
url: "system/role/deleteRoleById",
cache: false,
data: {"roleId": roleId},
dataType: "json",
success: function(data) {
roleList = data;
listRole();
},
error: function(data) {
if (data == null) {
alert("删除失败！");
}
}
});
}
// 角色列表, 共用的方法
function listRole() {
var roleTableStr = "";
if (roleList == null || roleList.length <= 0) {
roleTableStr += "<h3>很遗憾，没有查询到任何结果！</h3>";
return false;
}
roleTableStr += '<table class="table table-striped">';
roleTableStr += '<thead><tr><td style="font-weight: bold;">序号</td><td style="font-weight: bold;">角色编号</td><td style="font-weight: bold;">角色名称</td><td style="font-weight: bold;">所有角色</td><td style="font-weight: bold;">角色描述</td><td style="font-weight: bold;">操作</td></tr></thead>';
$.each(roleList, function(i) {
roleTableStr += '<tr><td>'+(i+1)
+'</td><td>'+roleList[i].roleid
+'</td><td>'+roleList[i].rolename
+'</td><td>'+roleList[i].authids
+'</td><td>'+roleList[i].description
+'</td><td><a href="#">编辑</a> | <a href="javascript:void(0);" onclick="deleteRoleById('+roleList[i].roleid+');">删除</a>'
+'</td></tr>';
});
roleTableStr += '</table>';
$("#roleListDiv").html(roleTableStr);
}
Controller：
// 删除角色
@RequestMapping(value="/deleteRoleById", method=RequestMethod.GET)
@ResponseBody
public List<TbRole> deleteRoleById(@RequestParam("roleId") Integer roleId) {
int count = roleService.deleteRoleById(roleId);
if (count == 1) {
List<TbRole> roleList = roleService.findRoleList();
return roleList;
}
return null;
}
这样的效果：
在页面点击删除超链接，URL不变，页面不会刷新，但是记录已经删除了，给用户带来良好的体验。
第四种情况：使用ajax请求，发起请求和接收返回数据的页面不是同一个页面
这种方式没有讨论的意义，因为不同页面肯定会导致页面跳转，而ajax请求时页面无刷新或是在本页面上的局部刷新，所以这是一个自相矛盾的问题。
浙公网安备 33010602011771号