文章目錄
靜態html+ajax與jsp
爲什麼要使用ajax請求，而不用jsp的el表達式和jstl方便的得到數據呢？
- 優點一: 前後端分離
jsp是一種早期的技術，它將前後端雜糅在一起，html和java代碼交錯；而現在前後端分離逐漸成爲業界標準，將靜態html和後端java代碼分開的思想有利於前後端專注於自己的工作，提高工作效率，降低維護成本。 - 優點二: 訪問速度更快
我們知道jsp的本質是servlet，因此瀏覽器在第一次訪問jsp時，需要將jsp編譯成servlet，這將耗費很多時間，而靜態html就沒有這樣的問題。 - 優點三: 服務器壓力更小
既然jsp是servlet，那麼無論是編譯還是訪問，都需要佔用服務器資源，前後端分離可以有效緩解問題。
ajax訪問流程圖
前期準備
配置jQuery
在web/webapp（具體目錄名根據項目類型判斷）目錄下新建一個js目錄，導入jQuery-x.x.x.js文件，腳本下載地址：jQuery下載
準備index.html
編寫一個index.html文件，導入jQuery腳本，提供一個按鈕和空表格（只有表頭），爲按鈕和表格指定id以便腳本調用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Maven</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-3.5.0.js"></script>
</head>
<body>
<button id="view">View Mysql By Ajax + MyBatis</button>
<table id="data">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</table>
</body>
網頁效果：
準備dao
筆者在dao層用MyBatis + MyBatis Generator實現了一個讀取數據庫這種users數據表的方法，這個方法會訪問users數據表，並返回一個存有數據的List列表（此處不是本文重點，如果不會用MyBatis，也可以使用JDBC實現）：
package dao;
import mapper.UsersMapper;
import org.apache.ibatis.session.SqlSession;
import pojo.Users;
import pojo.UsersExample;
import java.util.List;
public class UsersUtil {
public static List<Users> getAllUsers() {
InputStream stream = Resources.getResourceAsStream("mybatis-config.xml");
SqlSessionFactory factory = new SqlSessionFactoryBuilder().build(stream);
SqlSession session = factory.openSession();
UsersExample example = new UsersExample();
example.createCriteria().andIdIsNotNull();
UsersMapper mapper = myBatisSession.getMapper(UsersMapper.class);
return mapper.selectByExample(example);
}
}
準備servlet
接着在service層實現一個servlet。
此處使用alibaba的fastjson.jar（沒有jar包的請自行下載，筆者此處使用Maven配置）實現列表與json的快速轉換，最後通過resp.getWriter().append()把json字符串傳出：
package service;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import dao.UsersUtil;
import pojo.Users;
import org.apache.ibatis.io.Resources;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
public class UsersServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
List<Users> usersList = UsersUtil.getAllUsers();
//JSON轉字符串寫入resp
resp.getWriter().append(JSON.toJSONString(jsonArray));
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doGet(req, resp);
}
}
jQuery實現ajax
在js目錄中創建loadDataAjax.js腳本，該腳本會在網頁加載完成後爲view按鈕分配click方法，點擊後會發送ajax請求，得到數據並加入表格。
$(function(){ pass }): 網頁加載完成時會自動調用函數體$("#id").click(function(){ pass }): 監聽對應id的按鈕，提供click方法$.ajax():ajax請求
關於ajax請求的參數：
url: 請求地址type: 指定請求類型(get/post)dataType: 指定返回的數據類型.done: 訪問成功調用的方法，其中參數msg是resp返回的數據.fail: 訪問失敗調用的方法
//網頁加載完成時調用
$(function () {
//爲id=view的按鈕提供click方法
$("#view").click(function () {
//發送ajax請求
$.ajax({
url: encodeURI("sql"),
type: "get",
dataType: "json"
})
//訪問成功
.done(function (msg) {
//清空id=data的表格第一行（表頭）以外的數據
$("#data tr:not(:first)").empty();
//遍歷返回的json數組
$.each(msg, function (index, user) {
//向表格中添加json數組每個元素的內容
$("#data").append("<tr>" +
"<td>" + user.id + "</td>" +
"<td>" + user.name + "</td>" +
"<td>" + user.age + "</td>" +
"</tr>")
})
})
//訪問失敗
.fail(function () {
alert("ERROR!")
})
})
})
最後在index.html中導入腳本：
<script type="text/javascript" src="js/loadDataAjax.js"></script>
網頁成功返回數據並寫入列表：
附：關於Maven項目引入js無法使用的問題
Maven中的css、js文件都會被過濾器過濾，要使文件可以正常使用，我們需要在WEB-INF/web.xml中加入以下配置：
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.js</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.css</url-pattern>
</servlet-mapping>