1.先写好html基础样式

我懒得去写css样式233，能看就行

#page {

width: 20px;

}

id	name	pwd	age

上一页

下一页

2.编写servlet

2.1 先写查询数据库总条数的servlet LoadServlet

//WorkerDaoImpl是我自己写的数据库操作类

WorkDaoImpl workDao=new WorkDaoImpl();

int count =0;

try {

//查询总条数

count = workDao.queueCountWorker();

} catch (Exception e) {

e.printStackTrace();

}

//传输类型为json，编码为utf-8

response.setContentType("application/json;charset=utf-8");

//Java对象转换JSON，导入的是Jackson的包

ObjectMapper mapper=new ObjectMapper();

Map map=new HashMap<>();

map.put("count",count);

mapper.writeValue(response.getWriter(),map);

//将总条数写入ServletContext域，避免多次查询浪费资源

ServletContext sc = this.getServletContext();

sc.setAttribute("count",count);

2.2 编写查询数据的servlet QueueAllWorkersServlet

//获取前端传来的页码数

int page = Integer.parseInt(request.getParameter("page"));

//从ServletContext中获取总条数

ServletContext sc = this.getServletContext();

int count = (Integer) sc.getAttribute("count");

List workers = null;

WorkDaoImpl workDao = new WorkDaoImpl();

try {

//当页码小于1，显示第一页的数据

if (page<1){

workers = workDao.queueAllWorker(0, 5);

//当页码大于最大页数，显示最大页数的数据

}else if (page>Math.ceil(((double)count)/5)){

workers = workDao.queueAllWorker((int)Math.ceil(((double)count)/5)-1, 5);

}else {

workers = workDao.queueAllWorker((page - 1) * 5, 5);

}

} catch (Exception e) {

e.printStackTrace();

}

//数据类型为json，字符集为utf-8

response.setContentType("application/json;charset=utf-8");

//数据传出

ObjectMapper mapper = new ObjectMapper();

mapper.writeValue(response.getWriter(), workers);

2.3 补充：JSON数据和Java对象的相互转换

JSON解析器：

常见的解析器：Jsonlib，Gson，fastjson，jackson

1.JSON转为Java对象

1. 导入jackson的相关jar包

2. 创建Jackson核心对象 ObjectMapper

3. 调用ObjectMapper的相关方法进行转换

1. readValue(json字符串数据,Class)

2. Java对象转换JSON

1. 使用步骤：

1. 导入jackson的相关jar包

2. 创建Jackson核心对象 ObjectMapper

3. 调用ObjectMapper的相关方法进行转换

1. 转换方法：

* writeValue(参数1，obj):

参数1：

File：将obj对象转换为JSON字符串，并保存到指定的文件中

Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中

OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中

* writeValueAsString(obj):将对象转为json字符串

2. 注解：

1. @JsonIgnore：排除属性。

2. @JsonFormat：属性值得格式化

* @JsonFormat(pattern = "yyyy-MM-dd")

3. 复杂java对象转换

1. List：数组

2. Map：对象格式一致

3.ajax编写

3.1 源码

$(function () {

var page = 1;

var pages = 1;

;

$("#page").val(page);

//查询方法

function ser() {

$.post("QueryAllWorkers2Servlet", {page: page}, function (data) {

//拼接字符串最后写入到res中

var str = "";

//遍历data数组

for (var i = 0; i < data.length; i++) {

//获取data当前的json

var user = data[i];

str += "

";

//遍历json

for (var key in user) {

str = str + "

" + user[key] + "";

}

str = str + "

";

}

$("#res").html(str);

});

}

//刷新后自动获取最大页码

function load() {

$.post("LoadServlet", null, function (data) {

pages = Math.ceil(data["count"] / 5);

$("#pages").text("/" + pages);

})

}

load();

ser();

//下一页点击事件

$("#down_btn").click(function () {

page = page + 1;

//检验

if (page > pages) {

page = pages;

}

//将page中的值改为修改后的页码

$("#page").val(page);

ser();

});

//上一页点击事件

$("#up_btn").click(function () {

page = page - 1;

//检验

if (page < 1) {

page = 1;

}

//修改

$("#page").val(page);

ser();

});

//page输入框失去焦点事件

$("#page").blur(function () {

page = parseInt($("#page").val());

//校验，若输入的值大于最大页码数，则将页码变为最大页码数

if (page > pages) {

page = pages;

//校验，若输入的值小于1，则将页码变为1

} else if (page < 1) {

page = 1;

}

$("#page").val(page);

ser();

});

});

3.2 补充 ajax参数

1. $.ajax()

* 语法：$.ajax({键值对});

//使用$.ajax()发送异步请求

$.ajax({

url:"ajaxServlet1111" , // 请求路径

type:"POST" , //请求方式

//data: "username=jack&age=23",//请求参数

data:{"username":"jack","age":23},

success:function (data) {

alert(data);

},//响应成功后的回调函数

error:function () {

alert("出错啦...")

},//表示如果请求响应出现错误，会执行的回调函数

dataType:"text"//设置接受到的响应数据的格式

});

2. $.get()：发送get请求

* 语法：$.get(url, [data], [callback], [type])

* 参数：

* url：请求路径

* data：请求参数

* callback：回调函数

* type：响应结果的类型

3. $.post()：发送post请求

* 语法：$.post(url, [data], [callback], [type])

* 参数：

* url：请求路径

* data：请求参数

* callback：回调函数

* type：响应结果的类型

Ajax写分页查询(实现不刷新页面)

获取数据库中大量的信息显示在页面上,必然要使用到分页查询: 若不使用Ajax,而是用其他的方法,肯定是要刷新页面的,用户体检很不好, 所以最好使用Ajax的方法写分页查询: 1.先来找一张数据很多的表 ...

用ajax写分页查询-----2017-05-17

要写分页,首先你得清楚,一页你想显示多少条信息?如何计算总共显示的页数? 先说一下思路: (1)从数据库读取数据,以chenai表为例,读取所有留言信息.并能够实现输入发送者,可以查询该发送者的留言总 ...

如何用ajax写分页查询(以留言信息为例)-----2017-05-17

要写分页,首先你得清楚,一页你想显示多少条信息?如何计算总共显示的页数? 先说一下思路: (1)从数据库读取数据,以chenai表为例,读取所有留言信息.并能够实现输入发送者,可以查询该发送者的留言总 ...

5&period;Hibernate实现全套增删改查和ajax异步分页

1.1 创建如下oracle数据库脚本 drop sequence seq_stu; create sequence SEQ_STU minvalue maxvalue start increment ...

pagebean pagetag java 后台代码实现分页 demo 前台标签分页 后台java分页

java 后台代码实现分页 demo 实力 自己写的 标签分页 package com.cszoc.sockstore.util; import java.util.HashMap;import ja ...

原生Ajax 和Jq Ajax

前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的 ...

Ajax做分页

Ajax做分页 用这种ajax做分页的方法比较简单,把代码直接复制就可以,然后根据实际更改一下里面的参数. .设置分页显示显示的样式,显示效果如下. 复制代码

要想实现ajax搜索分页 其实很简单 第一步:在 Yii 框架自带的搜索和分页正常运行的情况下,在视图层

ajax实现分页和分页查询

之前有写过ajax的加载页面,是非常简单的,而且不需要重新刷新页面,写起来也是非常的方便,今天写的分页是不用封装page.class.php的, 是单纯的js和ajax写出来的  首先为了页面的整齐与 ...

随机推荐

Django REST framework&plus;Vue 打造生鲜超市(十一)

十二.支付宝沙箱环境配置 12.1.创建应用 进入蚂蚁金服开放平台(https://open.alipay.com/platform/home.htm),登录后进入管理中心-->>应用列表 ...

ssh免密登陆配置

目录 ssh免密登陆 在A工作站上输入 B服务器上输入 登陆 ssh初次登陆询问 1.单次取消 2.ansible中增加链接参数 3.修改ansible配置参数[推荐] 4.修改服务器上的ssh_co ...

Angular 4 路由守卫

路由守卫 只有当用户已经登录并拥有某些权限时才能进入某些路由 一个有多个表单组成的向导,如注册流程,用户只有在当前组件的组件中填写了满足要求的信息才可以导航到下一个路由 当用户未执行保存操作而试图离开 ...

Windows下MySQL免安装版的安装、卸载

一.安装 1.下载 到MySQL官网http://dev.mysql.com/downloads/mysql/ 下载mysql-5.6.15-win32.zip. 2.拷贝 将mysql-5.6.15 ...

java代码优化(1)---

代码的优化,需要考虑的维度很多.但是代码的优化并不是减少代码量,有的时候我们需要增加代码来提高代码的可读性. 1.正确标记变量 2.封装某个动作 3.注意函数的写法 4.不容易理解的东西,加注释

Druid-类图-属性表

所属文章:池化技术(一)Druid是如何管理数据库连接的? 本篇为「工具人」文章,建议直接用「ctrl+f」进行查找属性.方法.类名,快速了解其含义和所属类. 主要流程里主要涉及到的类名称.类属性.类 ...

Python从零开始——元组tuple

一:元组知识内容 二:元组的不可变性 三:元组创建 四:元组操作

shell 查看目前机器listen的所有端口

netstat -lnp 这条命令的意思是列出系统里面监听网络连接的端口号和相应的进程PID.参数说明:-t:表示列出TCP连接(也可以加上-u参数表示同时列出UDP网络连接)-l:表示列出正在网络监 ...