jquery ajax 分页 java_java,jq,ajax写分页

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：响应结果的类型