众筹网站项目第四天之异步请求的分页查询和模糊条件查询(2)

打开原教程视频
注：本人是渣渣，有错请谅解。

异步请求的分页查询和模糊条件查询

同步请求和异步请求的区别在实现登录功能时已经介绍过了，下图便是实现异步请求分页查询的时序图。

可以看出我们首先进行用户列表的页面跳转，再进行用户的分页查询。
首先将同步请求方式的代码注释

添加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地址路径

启动服务器处进行测试

模糊查询测试

谢谢阅读。

众筹网站项目第四天之异步请求的分页查询和模糊条件查询(2)相关推荐

众筹网站项目第五天之用户的增、删、改
打开原教程视频注:本人是渣渣,有错请谅解. 增加用户流程:点击新增按钮->跳转至用户信息填写页面->点击添加将数据保存到后台服务器并转到用户列表. 1.在userList.jsp的新增 ...
众筹网站项目第七天之zTree树形结构实现(2)
打开原教程视频注:本人是渣渣,有错请谅解. 许可维护页面的zTree树形结构实现实现效果: 实现过程 1.数据准备在数据库中插入相应的数据 insert into `t_permission` ...
众筹网站项目第七天之用户角色分配(1)
打开原教程视频注:本人是渣渣,有错请谅解. 实现用户角色分配功能 1.数据准备 insert into `t_role` (`id`, `name`) values('1','PM - 项目经理') ...
Layui表格异步请求服务器端分页数据
文章仅作为个人备忘,未精细整理方法及配置参考处layui网站及相关网络资源,实现了通过Layui表格快速实现请求服务器端分页数据. 前端代码 <!DOCTYPE html> <ht ...
众筹网站项目第一天之项目环境搭建和环境测试
打开原教程视频注:本人是编程小白,这个是我第一个尝试的项目,编写该系列博客是为了记录第一次做项目的经历,其中肯定会有不少不成熟的操作甚至错误之处,如果可以,希望大神指出,谢谢大家. 资料准备点击获 ...
基于JavaWeb的互联网金融创意众筹网站系统
目录第1章绪论 1 1.1 课题的背景与现状 1 1.1.1 课题的背景 1 1.1.2 课题国内外现状 1 1.2 课题的提出及意义 2 1.3 课题研究思路与环境 3 1.3.1 课题的研究 ...
[附源码]计算机毕业设计JAVA创意众筹网站
[附源码]计算机毕业设计JAVA创意众筹网站项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(Intell ...
Spring Boot 异步请求和异步调用
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章一.Spring Boot中异步请求的使用 1.异步请求与同步请求 ...
Spring Boot 异步请求和异步调用，一文搞定！
一.Spring Boot中异步请求的使用 1.异步请求与同步请求特点: 可以先释放容器分配给请求的线程与相关资源,减轻系统负担,释放了容器所分配线程的请求,其响应将被延后,可以在耗时处理完成(例如 ...

众筹网站项目第四天之异步请求的分页查询和模糊条件查询(2)

异步请求的分页查询和模糊条件查询

众筹网站项目第四天之异步请求的分页查询和模糊条件查询(2)相关推荐

最新文章

热门文章