AJAX异步请求
什么是ajax
- 异步
- JavaScript
同步和异步的区别
- 同步方式：正常情况下，浏览器与服务器之间是串行操作，类似于一个Java线程的操作。
- 异步方式：浏览器与服务器是并行操作，类似于Java中多个线路同时工作。
即浏览器后台发送数据给服务器，不是通过表单去提交数据给服务器。
用户在前台还是可以继续工作，用户感觉不到浏览器已经将数据发送给了服务器，并且服务器也已经返回了数据。
AJAX的执行流程
jQuery 的通用方式实现 AJAX
核心语法：$.ajax({name:value,name:value,…});
url：请求的资源路径。
async：是否异步请求，true-是，false-否 (默认是 true)。
data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。
type：请求方式，POST 或 GET (默认是 GET)。
dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
success：请求成功时调用的回调函数。
error：请求失败时调用的回调函数。
通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部
分内容进行局部更新。
同步和异步
同步：服务器端在处理过程中，无法进行其他操作。
异步：服务器端在处理过程中，可以进行其他操作。
GET 方式实现：
.
g
e
t
(
)
;
P
O
S
T
方
式
实
现
：
.get(); POST 方式实现：
.get();POST方式实现：.post();
url：请求的资源路径。
data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。
callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。
type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
AJAX实现页面加载内容并分页显示(Mybatis,分页插件实现)
sql数据准备
-- 创建db11数据库
CREATE DATABASE db11;
-- 使用db11数据库
USE db11;
-- 创建数据表
CREATE TABLE news(
id INT PRIMARY KEY AUTO_INCREMENT, -- 主键id
title VARCHAR(999) -- 新闻标题
);
-- 插入数据
DELIMITER $$
CREATE PROCEDURE create_data()
BEGIN
DECLARE i INT;
SET i=1;
WHILE i<=100 DO
INSERT INTO news VALUES (NULL,CONCAT('我是数据库中的第',i,'条数据'));
SET i=i+1;
END WHILE;
END
$$
-- 调用存储过程
CALL create_data();
项目目录
配置文件
MyBatisConfig
注意:要在配置文件中配置插件的使用
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd">
<!--configuration：核心根标签-->
<configuration>
<!--引入数据库连接信息配置文件-->
<properties resource="config.properties"/>
<!--集成LOG4J日志信息-->
<settings>
<setting name="logImpl" value="log4j"/>
</settings>
<!--集成分页助手插件,注意这里要配置,否则插件使用不了-->
<plugins>
<plugin interceptor="com.github.pagehelper.PageInterceptor" />
</plugins>
<!--配置数据库环境，可以有多个。default指定默认使用哪个-->
<environments default="mysql">
<!--配置环境，id是唯一标识-->
<environment id="mysql">
<!--事务管理 采用JDBC默认的事务-->
<transactionManager type="JDBC" />
<!--数据源：连接池-->
<dataSource type="POOLED">
<!--获取数据库连接相关配置-->
<property name="driver" value="${driver}"/>
<property name="url" value="${url}"/>
<property name="username" value="${username}"/>
<property name="password" value="${password}"/>
</dataSource>
</environment>
</environments>
<!--配置映射关系-->
<mappers>
<!--接口所在的包-->
<package name="com.fs.mapper"/>
</mappers>
</configuration>
config.properties
driver=com.mysql.jdbc.Driver
url=jdbc:mysql://192.168.93.132:3306/db11
username=root
password=root
log4j.properties
# Global logging configuration
log4j.rootLogger=DEBUG, stdout
# Console output...
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%5p [%t] - %m%n
实体类
public class News {
private Integer id; //主键id
private String title; //新闻标题
//省略getsettostring方法
}
Dao
package com.fs.mapper;
import com.fs.bean.News;
import org.apache.ibatis.annotations.Select;
import java.util.List;
public interface NewsMapper {
/*
查询全部,分页插件会自动帮我们实现为limit分页
*/
@Select("SELECT * FROM news")
public abstract List<News> selectAll();
}
Service
package com.fs.service;
import com.github.pagehelper.Page;
public interface NewsService {
/*
分页查询
*/
public abstract Page pageQuery(Integer start, Integer pageSize);
}
service实现类
注意:
这里面使用分页插件来封装数据库中查询出来的对象,并且将查询出来的所有记录封装成你需要的每页数据大小
package com.fs.service.impl;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import com.fs.mapper.NewsMapper;
import com.fs.service.NewsService;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import java.io.IOException;
import java.io.InputStream;
public class NewsServiceImpl implements NewsService {
@Override
public Page pageQuery(Integer start, Integer pageSize) {
InputStream is = null;
SqlSession sqlSession = null;
Page page = null;
try{
//1.加载核心配置文件
is = Resources.getResourceAsStream("MyBatisConfig.xml");
//2.获取SqlSession工厂对象
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);
//3.通过SqlSession工厂对象获取SqlSession对象
sqlSession = sqlSessionFactory.openSession(true);
//4.获取NewsMapper接口的实现类对象
NewsMapper mapper = sqlSession.getMapper(NewsMapper.class);
//5.封装Page对象, start:当前页码 pageSize：每页显示的条数
page = PageHelper.startPage(start,pageSize);
//由于使用了分页插件
//6.调用实现类对象的查询全部方法，此时底层执行的就是MySQL的limit分页查询语句,mapper调用查询方法后,会将数据封装到page对象中,就是json查询的list里面
mapper.selectAll();
} catch (Exception e) {
e.printStackTrace();
} finally {
//7.释放资源
if(sqlSession != null) {
sqlSession.close();
}
if(is != null) {
try {
is.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
//8.返回page对象到控制层
return page;
}
}
Servlet
package com.fs.controller;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageInfo;
import com.fs.bean.News;
import com.fs.service.NewsService;
import com.fs.service.impl.NewsServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
@WebServlet("/newsServlet2")
public class NewsServlet2 extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置请求和响应的编码
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
//1.获取请求参数
String start = req.getParameter("start");
String pageSize = req.getParameter("pageSize");
//2.根据当前页码和每页显示的条数来调用业务层的查询方法，得到分页Page对象
NewsService service = new NewsServiceImpl();
Page page = service.pageQuery(Integer.parseInt(start), Integer.parseInt(pageSize));
//3.封装PageInfo对象,这里面会封装分页的数值信息
PageInfo<List<News>> info = new PageInfo<>(page);
//4.将得到的数据转为JSON
String json = new ObjectMapper().writeValueAsString(info);
//5.将数据响应给客户端
resp.getWriter().write(json);
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
}
html
注意:分页插件显示按钮的标签属性是固定的,复制粘贴即可,还有给分页按钮设置参数按照代码里面的方式灵活运用就可以
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX异步加载数据库查询数据并且分页显示</title>
<!-- 加载分页插件的样式-->
<link rel="stylesheet" href="css/tt.css">
<link rel="stylesheet" href="css/simplePagination.css">
</head>
<body>
<div class="center">
<ul class="data_list">
</ul>
<hr>
<!--分页插件的标签元素的固定模板-->
<div class="content">
<div class="pagination-holder clearfix">
<div id="light-pagination" class="pagination"></div>
</div>
</div>
</div>
</body>
<!--jQuery-->
<script src="js/jquery-3.3.1.min.js"></script>
<!--分页插件js文件-->
<script src="js/jquery.simplePagination.js"></script>
<script>
//1.定义当前页码和每页显示的条数
let start = 1;
let pageSize = 10;
//2.调用查询数据的方法
queryByPage(start, pageSize);
//3.定义请求查询分页数据的函数，发起AJAX异步请求，将数据显示到页面
function queryByPage(start, pageSize) {
$.ajax({
//请求的资源路径
url:"newsServlet2",
//请求的参数
data:{"start":start,"pageSize":pageSize},
//请求的方式
type:"POST",
//响应数据形式
dataType:"json",
//请求成功后的回调函数
success:function (pageInfo) {
//将数据显示到页面
let titles = ``;
for(let i = 0; i < pageInfo.list.length; i++) {
//使用反引号拼接字符串,使用${}提高代码的可读性,少了很对+号和引号.
titles += `
<li>
<div class="title-box">
<a href="#" class="link">
${pageInfo.list[i].title}
<hr>
</a>
</div>
</li>
`;
}
$(".data_list").html(titles);
//4.为分页按钮区域设置页数参数（总页数和当前页）
$("#light-pagination").pagination({
//总页数
pages:pageInfo.pages,
//当前页
currentPage:pageInfo.pageNum
});
//5.为分页按钮绑定单击事件,完成上一页下一页查询功能
$("#light-pagination .page-link").click(function () {
//获取点击按钮的文本内容
let page = $(this).html();
//如果点击的是Prev，调用查询方法，查询当前页的上一页数据
if(page == "Prev") {
queryByPage(pageInfo.pageNum - 1,pageSize);
}else if (page == "Next") {
//如果点击的是Next，调用查询方法，查询当前页的下一页数据
queryByPage(pageInfo.pageNum + 1,pageSize);
} else {
//调用查询方法，查询当前页的数据
queryByPage(page,pageSize);
}
});
}
});
}
</script>
</html>
启动tomcat,在浏览器地址栏测试是否返回JSON对象
{
total: 100,
list: [
{
id: 1,
title: "我是数据库中的第1条数据"
},
{
id: 2,
title: "我是数据库中的第2条数据"
},
{
id: 3,
title: "我是数据库中的第3条数据"
},
{
id: 4,
title: "我是数据库中的第4条数据"
},
{
id: 5,
title: "我是数据库中的第5条数据"
},
{
id: 6,
title: "我是数据库中的第6条数据"
},
{
id: 7,
title: "我是数据库中的第7条数据"
},
{
id: 8,
title: "我是数据库中的第8条数据"
},
{
id: 9,
title: "我是数据库中的第9条数据"
},
{
id: 10,
title: "我是数据库中的第10条数据"
}
],
pageNum: 1,
pageSize: 10,
size: 10,
startRow: 1,
endRow: 10,
pages: 10,
prePage: 0,
nextPage: 2,
isFirstPage: true,
isLastPage: false,
hasPreviousPage: false,
hasNextPage: true,
navigatePages: 8,
navigatepageNums: [
1,
2,
3,
4,
5,
6,
7,
8
],
navigateFirstPage: 1,
navigateLastPage: 8
}
访问hello.html体验结果
1329
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
