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 方式實現：$.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, -- 主鍵idtitle 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; //主鍵idprivate 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 {@Overridepublic 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 {@Overrideprotected 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.將得到的數據轉為JSONString json = new ObjectMapper().writeValueAsString(info);//5.將數據響應給客戶端resp.getWriter().write(json);}@Overrideprotected 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體驗結果

總結

以上是生活随笔為你收集整理的浅谈AJAX并实现使用pagehelper-5.1.10.jar分页插件实现异步从数据库中获取数据分页显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。