众筹网站项目第四天之异步请求的分页查询和模糊条件查询(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地址路径

启动服务器处进行测试

模糊查询测试

谢谢阅读。