打开原教程视频
注:本人是渣渣,有错请谅解。
异步请求的分页查询和模糊条件查询
同步请求和异步请求的区别在实现登录功能时已经介绍过了,下图便是实现异步请求分页查询的时序图。
可以看出我们首先进行用户列表的页面跳转,再进行用户的分页查询。
首先将同步请求方式的代码注释
添加id值用于取值调用
接着在userList.jsp中编写异步请求的方法体
var datas={
"currentPage" : 1,
"pageCount" : 10
};
var loadingUsers=-1;
$("#queryButton").click(function () {
var queryText=$("#queryText").val();
if ($.trim(queryText)==""){
layer.msg("查询条件不能为空!", {time:1000, icon:5, shift:6}, function () {
$("#queryText").focus();
}); //弹出时间,图标,特效
return;
}
datas.queryText=$.trim(queryText);
});
function queryUserList(currentPage) {
datas.currentPage=currentPage;
$.ajax({
type : "POST",
data : datas,
url : "userController/userList.do",
beforeSend : function() {
loadingUsers = layer.msg('Loading', {icon: 16});
return true;
},
success : function (result) {
layer.close(loadingUsers);
if (result.success){
// alert("进行局部刷新");
var page = result.page;
var users= page.users;
var content ='';
$.each(users,function (index,user) {
content+='<tr>';
content+=' <td>'+(index+1)+'</td>';
content+=' <td><input type="checkbox"></td>';
content+=' <td>'+user.loginacct+'</td>';
content+=' <td>'+user.username+'</td>';
content+=' <td>'+user.email+'</td>';
content+=' <td>';
content+=' <button type="button" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check"></i></button>';
content+=' <button type="button" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></button>';
content+=' <button type="button" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></button>';
content+=' </td>';
content+=' </tr>';
});
$("tbody").html(content);
var contentBar='';
if (page.currentPage==1){
contentBar+='<li class="disabled"><a>上一页</a> </li>';
}else {
contentBar+='<li ><a οnclick="pageChange('+(page.currentPage-1)+')">上一页</a> </li>';
}
for (var i =1 ;i <= page.pageCount;i++){
contentBar+='<li ';
if (page.currentPage==i){
contentBar+=' class="active"';
}
contentBar+=' ><a οnclick="pageChange('+i+')">'+i+'</a> </li>';
}
if (page.currentPage==page.pageCount){
contentBar+='<li class="disabled"><a>下一页</a> </li>';
}else {
contentBar+='<li ><a οnclick="pageChange('+(page.currentPage+1)+')">下一页</a> </li>';
}
$(".pagination").html(contentBar);
}else {
layer.msg("数据加载失败!!!", {time:1000, icon:5, shift:6}); //弹出时间,图标,特效
}
},
error : function (result) {
layer.msg(result.message, {time:1000, icon:5, shift:6}); //弹出时间,图标,特效
}
});
}
$("#queryButton").click(function () {
var queryText=$("#queryText").val();
datas.queryText=queryText;
queryUserList(1);
})
需要注意的,我们要将所有的数据封装到result对象返回界面,所以需要将包含用户等数据的page实体类添加到AjaxResult的属性中,并添加get和set方法。
前端控制器方法编写
/**
* 页面跳转
* @return
*/
@RequestMapping("/toUserList")
public String toUserList(){
return "user/userList";
}
/**
* 异步请求
* @param currentPage
* @param currentCount
* @return
*/
@RequestMapping(value = "/userList")
public @ResponseBody Object toUserList(@RequestParam(value = "currentPage",required = false,defaultValue = "1") Integer currentPage,
@RequestParam(value = "currentCount",required = false,defaultValue = "10") Integer currentCount ,
String queryText){
AjaxResult result = new AjaxResult();
try {
Map<String,Object> map =new HashMap<String, Object>();
map.put("currentPage",currentPage);
map.put("currentCount",currentCount);
if (StringUtil.isNotEmpty(queryText)){
if (queryText.contains("%")){
queryText = queryText.replaceAll("%", "\\\\%");
}
map.put("queryText",queryText);
}
Page page = userService.queryUserList(map);
result.setPage(page);
result.setSuccess(true);
} catch (Exception e) {
e.printStackTrace();
result.setMessage("数据加载出现异常。。。");
result.setSuccess(false);
}
return result;
}
service实现类方法,并在dao层和service层添加相应的方法名和参数
public Page queryUserList(Map<String, Object> map) {
Page page = new Page((Integer) map.get("currentPage"), (Integer) map.get("currentCount"));
Integer startIndex = (Integer) map.put("startIndex", page.getStartIndex());
List<User> users = userMapper.queryUserList(map);
page.setUsers(users);
Integer totalCount = userMapper.queryUserCount(map);
page.setTotalCount(totalCount);
return page;
}
UserMapper.xml的sql语句
<select id="queryUserCount" resultType="int">
select count(*) from t_user
<where>
<if test="queryText!=null">
loginacct like concat("%",#{queryText},"%")
</if>
</where>
</select>
<select id="queryUserList" resultType="com.bin.crowdfunding.bean.User">
select * from t_user
<where>
<if test="queryText!=null">
loginacct like concat("%",#{queryText},"%")
</if>
</where>
limit #{startIndex} ,#{currentCount}
</select>
在main.jsp中修改url地址路径
启动服务器处进行测试
模糊查询测试
谢谢阅读。