java前端学习日记2020-10-23（分页与异步操作）

java前端学习日记

(在页面端实现异步分页读取数据库数据)

---------------------------------------------------------------------------------------------------------------------------------------

首先了解MySQL数据库中的分页查询操作语句  limit 。

用法：select <列名> from <表名> limit pageNum，pageSize;

pageNum---索引的页数（从0开始）

pageSize---索引页数的尺寸，即每页数据的条数

例如：

在数据库中存在表 tb_user 表中属性分别是 uno，uname，tel，email，state;

运用分页查询操作 select * from tb_user limit 2,2;

此时我们查询的是将 tb_user 表中的数据按每一页两行分页，所分出的第二页。

---------------------------------------------------------------------------------------------------------------------------------------

承接上文数据库操作，现在需要在页面端显示数据，也就意味着我们要根据页面端的获取索引所需要的数据，例如当前页数。

为了完成分页显示操作。

我们在java端UserServlet类中加入自定义的方法:

protected void doFindPage(HttpServletRequest req, HttpServletResponse resp){

        利用请求对象中的getParameter(String)方法获取页面中对应标签名的值

        if(获取的值为空时){

                  查找所有(不分页查找)

        }else{

                  返回查找的信息

        }

        将查找到的信息使用Gson类序列化转换成json格式的字符串

        将转换完成的字符串输出到页面

}

	protected void doFindPage(HttpServletRequest req, HttpServletResponse resp) 
			throws IOException , ServletException{
		String sizeStr = req.getParameter("pageSize");
		String numStr = req.getParameter("pageNum");//从页面获取值
		Map<String, Object> map= null;
		try {
			if(null == sizeStr || "".equals(sizeStr)
					|| null == numStr || "".equals(numStr)) {
				map = biz.findByPage(null, null, null);
                                /*
                                    按页面查找
                                    findByPage(Member m,Integer pageNum,Integer pageSize)
                                    1.Member将查询的条件封装成对象。在底层查询时再调用对象中                                                 
                                    的值，当Member参数传入null时即为查询所有
                                    2.pageNum查询的页数
                                    3.pageSize查询页数的尺寸
                                */
			}else {
				map = biz.findByPage(null, Integer.parseInt(numStr),         Integer.parseInt(sizeStr));
			}
			
		} catch (Exception e) {
			e.printStackTrace();
		}
		Gson gson = new Gson();
		String info = gson.toJson(map);
		PrintWriter out = resp.getWriter();
		out.print(info);
	}

在web端用jQuery在JS代码中添加一个自定义的showPage(num)函数

function showPage(num){
    if(num==1){
        pageNum = 1;
    }else if(num == 2){
        if(pageNum>1){
            pageNum = pageNum-1;
        }
    }else if(num == 3){
        if(pageNum< pageTotal){
            pageNum = pageNum+1;
        }
    }else if(num == 4){
            pageNum = pageTotal;
    }
    
    $.get("member.action",{op:"findPage",pageNum:pageNum,pageSize:pageSize},function(data){
        /*
            total---总数据条数
            pageTotal---总页数
            pageNum---当前页数
         */
        total = data.total;//data响应的数据, 自动将json字符串转为对象
        if(total%pageSize == 0){
            pageTotal = total/pageSize;
        }else{
            pageTotal = parseInt(total/pageSize) + 1;
        }
        
        //将总页数设置到页面上
        $('#total').html(pageTotal);
        $('#pageNum').html(pageNum);
        showMembers(data.members);
        
        console.log(data);
    },"json");
}

通过传入的输出num判断当前操作----------例如：1、返回首页  2、上一页 3、下一页 4、尾页

$.get()是利用JQuery Ajax 的 GET 请求来实现获取数据并异步改变 div 元素的文本：

如下是Ajax get方法的具体使用规则

今天是学习java以来第一次发博客，在写的过程中也在复习知识点，希望各路大神多多指点。