1、BaseDao
持久層業務介面實作類的公共父類，定義了jdbc操作資料庫的所有公共方法，方便子類繼承；
import java.io.InputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.Properties;
/**
* 持久層業務介面實作類的公共父類，定義了jdbc操作資料庫的所有公共方法，方便子類繼承
* @author zhukang
*
*/
public class BaseDao {
// 資料庫操作物件
protected Connection conn = null;
protected PreparedStatement pstmt = null;
protected ResultSet rs = null;
/**
* 獲取資料庫連接，回傳獲取連接成功還是失敗
*/
public boolean getConnection(){
try {
// 創建Properties屬性物件
Properties properties = new Properties();
// 使用反射機制，讀取外部組態檔
InputStream inputStream = BaseDao.class.getClassLoader().getResourceAsStream("jdbc.properties");
// 加載輸入流物件，獲取組態檔內容
properties.load(inputStream);
// 讀取資料庫連接資訊
String driverClass = properties.getProperty("driverClass");
String jdbcUrl = properties.getProperty("jdbcUrl");
String user = properties.getProperty("user");
String password = properties.getProperty("password");
// 加載驅動
Class.forName(driverClass);
// 獲取資料庫連接物件
conn = DriverManager.getConnection(jdbcUrl, user, password);
} catch (Exception e) {
e.printStackTrace();
// 獲取連接失敗
return false;
}
// 獲取連接成功
return true;
}
/**
* 增刪改的通用方法：只需要提供執行的SQL陳述句和SQL陳述句需要的引數，使用預處理物件
*/
public int executeUpdate(String executeSql, Object ... params){
// 定義SQL陳述句執行的影響行數
int row = 0;
// 獲取資料庫連接，如果獲取失敗，不執行操作
if(getConnection()){
// 公共執行增刪改的處理代碼
try {
// 創建預處理操作物件
pstmt = conn.prepareStatement(executeSql);
// 實作動態傳參，注意: 傳入的預編譯SQL的?和傳入的引數個數和順序要一致，即：要保證一一對應
for (int i = 0; i < params.length; i++) {
pstmt.setObject(i + 1, params[i]);
}
// 執行增刪改操作，并獲取影響行數
row = pstmt.executeUpdate();
System.out.println("BaseDao增刪改的SQL=>"+pstmt);
} catch (Exception e) {
e.printStackTrace();
} finally {
releaseResource(conn, pstmt, null);
}
}
// 回傳影響行數
return row;
}
/**
* 查詢的通用方法：只需要提供執行的SQL陳述句和SQL陳述句需要的引數，使用預處理物件
*/
public void executeSelect(String executeSql, Object ... params){
// 獲取資料庫連接，如果獲取成功，執行查詢，否則不執行
if(getConnection()){
// 公共執行查詢的處理代碼
try {
// 創建預處理操作物件
pstmt = conn.prepareStatement(executeSql);
// 實作動態傳參，注意: 傳入的預編譯SQL的?和傳入的引數個數和順序要一致，即：要保證一一對應
for (int i = 0; i < params.length; i++) {
pstmt.setObject(i + 1, params[i]);
}
// 執行查詢操作，并獲取結果集
rs = pstmt.executeQuery();
System.out.println("BaseDao查詢的SQL=>"+pstmt);
} catch (Exception e) {
e.printStackTrace();
} finally {
// 不釋放資源，因為rs要回傳，關閉后，直接外層不可以使用
}
}
}
/**
* 釋放資料庫操作物件資源
*/
public void releaseResource(Connection conn, Statement stmt, ResultSet rs){
try {
// 手動釋放
if (null != rs) {
rs.close();
}
if (null != stmt) {
stmt.close();
}
if (null != conn) {
conn.close();
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
2、一個 Servlet 多請求 引數 mothed
使用反射實作;
(全部查詢當作條件查詢的沒有條件來查詢會比較方便后面的操作)；
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//根據請求攜帶的方法引數名引數,呼叫不同業務的處理方法
String mothedName = req.getParameter("mothed") == null ? "animes" : req.getParameter("mothed");
//利用反射，根據方法名呼叫指定方法
try {
Method method = getClass().getDeclaredMethod(mothedName,HttpServletRequest.class,HttpServletResponse.class);
method.setAccessible(true);
method.invoke(this, req,resp);
} catch (Exception e) {
e.printStackTrace();
}
}
//查詢所有的動漫串列
protected void animes(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("======= AnimesServlet查詢所有的動漫串列==========");
String aname = req.getParameter("aname");
String author = req.getParameter("author");
String cid = req.getParameter("cid");
List<Anime> animes = animeService.animeList(aname, author, cid);
String animesJson = JSON.toJSONStringWithDateFormat(animes,"yyyy-MM-dd");
System.out.println(animesJson);
System.out.println("=============================================");
resp.getWriter().print(animesJson);
}
//洗掉動漫
protected void delAnime(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("==============洗掉動漫=====================");
}
//添加動漫
protected void addAnime(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("==============添加動漫=====================");
}
//修改動漫
protected void modAnime(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("==============修改動漫=====================");
}
3、搜索 點擊搜索按鈕，$("form").serialize()獲取引數，并條件查詢
$(function(){
//頁面初始化加載，主動查詢串列
//查詢所有的資料，就是條件查詢的沒有條件
showAnimeList();
//動態獲取動漫資料,動態顯示
function showAnimeList(){
$.getJSON("animes",$("form").serialize() ,function(data){
// 確定資料要動態顯示的位置
var $tbody = $("tbody");
//如果沒有資料，不能顯示分頁和提示暫無資料
if(data =https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/= null || data ==""){
//先清空再，顯示提示資訊
$tbody.empty().append("<tr align='center'><td colspan='8'>暫無資料</td></tr>");
//隱藏 tfoot
$("tfoot").hide();
//直接回傳，因為沒有資料，不需要拼接頁面
return;
}
// 隔行變色
var count = 1;
//定義動態展示內容,如果不定義為空字符的話，一直拼接新資料
var animeCountent = "";
// 資料決議
$(data).each(function(){
// 定義顏色
var bgColor = count % 2 == 0 ? "style='background-color:#ddd;'" : "";
animeCountent +=
"<tr align='center' " + bgColor + ">"
+ "<td>" + this.id + "</td>"
+ "<td>" + this.cname + "</td>"
+ "<td>" + this.name + "</td>"
+ "<td>" + this.author + "</td>"
+ "<td>" + this.actor + "</td>"
+ "<td>" + this.produce + "</td>"
+ "<td>" + this.create_date + "</td>"
+ "<td><a href='https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/#'>修改</a> <a href='https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/#'>洗掉</a></td>"
+ "</tr>";
count++;
});
$tbody.empty().append(animeCountent);
//有資料就要展示tfoot
$("tfoot").show();
});
}
//點擊搜索按鈕，根據條件篩選資料
$("#searchAnimes").click(function(){
showAnimeList();
});
});
4、分頁查詢sql 動態拼接(apramsList)
public class AnimeDaoImpl extends BaseDao implements AnimeDao{
@Override
public List<Anime> selectAnimeList(String aname, String author, String cid) {
//查詢動漫詳情的SQL陳述句
String executeSql = "select a.id, a.cid, a.name, a.author, a.actor, a.produce, a.create_date, c.name from animes a, category c where a.cid = c.id ";
//執行查詢的引數集合
//此寫法弊端，如果兩個或者多個引數同時有，必須不停的增加判斷，添加引數
//Object[] params = new Object[]{};
//動態引數，推薦使用
List<Object> paramList = new ArrayList<Object>();
//根據不同的查詢條件，拼接SQL陳述句和引數
//條件中有動漫名
if(null != aname && !"".equals(aname)) {
//模糊匹配
executeSql += " and a.name like concat('%',?,'%')";
paramList.add(aname);
}
//條件中有作者
if(null != author && !"".equals(author)) {
//模糊匹配
executeSql += " and a.author like concat('%',?,'%')";
paramList.add(author);
}
//條件中有型別
if(null != cid && !"0".equals(cid)) {
executeSql += " and a.cid = ?";
paramList.add(cid);
}
//定義回傳動漫串列的資料集合
List<Anime> animes = new ArrayList<Anime>();
try {
// 執行查詢
this.executeSelect(executeSql, paramList.toArray());
// 決議查詢結果
while(rs.next()){
// 每條資料，創建一個動漫物件，存盤資料
Anime anime = new Anime();
anime.setId(rs.getInt(1));
anime.setCid(rs.getInt(2));
//對動漫name結構處理
if(null != aname && !"".equals(aname)) {
//標記name
String markname = rs.getString(3).replace(aname, "<span style='color:red'>"+aname+"</span>");
anime.setName(markname);
}else {
anime.setName(rs.getString(3));
}
anime.setAuthor(rs.getString(4));
anime.setActor(rs.getString(5));
anime.setProduce(rs.getString(6));
anime.setCreate_date(rs.getDate(7));
anime.setCname(rs.getString(8));
// 將每條動漫資料物件放入集合
animes.add(anime);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
//關閉資源
this.releaseResource(conn, pstmt, rs);
}
//回傳動漫集合
return animes;
}
}
5、作業總結技巧(BaseDao 頁面不跳轉 Ajax)
5.1 Ajax動態拼接元素及資料
5.1.1 Ajax動態添加分類資料
//$(function() jQuery標志
$(function(){
//定位z展示分類的下拉元素
var $cidSelect = $("#cid");
//獲取動漫分類，動態展示
$.getJSON("categories",function(data){
//遍歷回傳的分類集合json集合數，動態加載分類選項
$(data).each(function(){
//alert(this.id+this.name);
$cidSelect.append("<option value='"+this.id+"'>"+this.name+"</option>");
});
});
});
5.1.2Ajax動態添加動漫資料
加載動漫資料的時候，直接考慮到模糊匹配查詢，全部查詢就是不帶條件查詢；
(這里的代碼又展示了一遍，主要是提示后面的操作是基于這些代碼操作的)；
//$(function() jQuery標志
$(function(){
//頁面初始化加載，主動查詢串列
showAnimeList();
//動態獲取動漫資料,動態顯示
function showAnimeList(){
$.getJSON("animes",$("form").serialize() ,function(data){
// 確定資料要動態顯示的位置
var $tbody = $("tbody");
//如果沒有資料，不能顯示分頁和提示暫無資料
if(data =https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/= null || data ==""){
//先清空再，顯示提示資訊
$tbody.empty().append("<tr align='center'><td colspan='8'>暫無資料</td></tr>");
//隱藏 tfoot
$("tfoot").hide();
//直接回傳，因為沒有資料，不需要拼接頁面
return;
}
// 隔行變色
var count = 1;
//定義動態展示內容,如果不定義為空字符的話，一直拼接新資料
var animeCountent = "";
// 資料決議
$(data).each(function(){
// 定義顏色
var bgColor = count % 2 == 0 ? "style='background-color:#ddd;'" : "";
animeCountent +=
"<tr align='center' " + bgColor + ">"
+ "<td>" + this.id + "</td>"
+ "<td>" + this.cname + "</td>"
+ "<td>" + this.name + "</td>"
+ "<td>" + this.author + "</td>"
+ "<td>" + this.actor + "</td>"
+ "<td>" + this.produce + "</td>"
+ "<td>" + this.create_date + "</td>"
+ "<td><a href='https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/modAnime.jsp?id="+this.id
+"&cid="+this.cid
+"&cname="+this.cname
+"&name="+this.name
+"&author="+this.author
+"&actor="+this.actor
+"&produce="+this.produce
+"&create_date="+this.create_date+"'>修改</a> "
+ "<a class='delAnime' href='https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/animes?mothed=delAnime&id="+this.id+"'>洗掉</a>"
+"</td>"
+ "</tr>";
count++;
});
$tbody.empty().append(animeCountent);
//有資料就要展示tfoot
$("tfoot").show();
});
}
//點擊搜索按鈕，根據條件篩選資料
$("#searchAnimes").click(function(){
showAnimeList();
});
});
5.1 標記搜索詞
5.1 .2 通過SQl 的 replace 標記
沒有同名欄位時可以使用；
//條件中有作者
if(null != author && !"".equals(author)) {
//標記關鍵字 author
String markAuthor = "replace(`author`,'"+author +"',\"<span style='color:red'>"+author+"</span>\") as 'a.author'";
//標記
executeSql = executeSql.replace("a.author", markAuthor);
//模糊匹配
executeSql += " and a.author like concat('%',?,'%')";
paramList.add(author); //添加引數
}
5.1.4 通過 replace 對結果進行 標記
//對動漫name結構處理
if(null != aname && !"".equals(aname)) {
//如果有這個條件 標記name
String markname = rs.getString(3).replace(aname, "<span style='color:red'>"+aname+"</span>");
anime.setName(markname);
}else {
//沒有這個條件則不需要標記
anime.setName(rs.getString(3));
}
5.2 修改 型別 選擇 select
先將修改傳過來的型別引數隱藏到一個input標簽中，在動態獲取型別的時候，JQuery獲取原來的型別引數，并選擇性的給option標簽添加selected引數；
<%
//獲取前端引數，封裝到物體類，并添加到request域中，方便獲取
//注意日期不要放進物體類
//直接value="https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/<%=request.getParameter("create_date") %>" 要不然會型別不匹配
request.setAttribute("upAnimes", anime);
%>
<!-- 隱藏動漫型別 cid -->
<input type="hidden" id="mycid" value="https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/${upAnimes.cid }" required>
<script type="text/javascript">
//異步獲取并遍歷動漫型別
$(function(){
//獲取動漫分類，動態展示
$.getJSON("categories",function(data){
//定位z展示分類的下拉元素
var $cidSelect = $("#cid");
//遍歷回傳的分類集合json集合數，動態加載分類選項
var cid = $("#mycid").val();
$(data).each(function(){
//alert(this.id+this.name);
if(cid == this.id){
$cidSelect.append("<option value='"+this.id+"' selected>"+this.name+"</option>");
}else{
$cidSelect.append("<option value='"+this.id+"'>"+this.name+"</option>");
}
});
});
});
5.3 Ajax 拼接確認洗掉（動態系結事件）
5.3.1 給動態添加的元素，添加cilck事件（無法系結事件）
cilck無法直接給動態的元素添加事件；
//確認洗掉提示 錯誤，click事件不能動態系結事件
$(".delAnime").click(function(){
if(!confirm("是否確認洗掉 ${anime.name } ")){
return false;
}
});
5.3.2 添加動態元素時直接動態添加 onClick=”return confirm(\"確認洗掉\")“
"<a class='delAnime' href='https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/animes?mothed=delAnime&id="+this.id+"' onClick='return confirm(\"確認洗掉《"+this.name+"》？\")'>洗掉</a></td>"
5.3.3 $(document).on 系結動態加載元素的事件
//動態系結事件(當前和以后添加的元素都可以系結)
//$(document).on 系結動態加載子元素的事件 document是父級元素即可
$(document).on('click', '.delAnime', function(){
if(!confirm("是否確認洗掉 ${anime.name }")){
return false;
}
});
on 系結動態加載元素的事件參考博客
5.6 分頁條件查詢 （不需要pageSupper類）
分頁條件查詢，包括了一般查詢，所以一個分頁條件查詢就夠了；
前端處理分頁引數；
5.6.1 引數
| 引數 | 說明 | 提交 |
|---|---|---|
| aname | 條件查詢引數 | 表單提交 |
| author | 條件查詢引數 | 表單提交 |
| cid | 條件查詢引數 | 表單提交 |
| pageNo | 當前頁面頁碼 | 獲取tfoot的pageNum，Ajax提交的時候拼接引數 |
| pageSize | 頁面大小 | 獲取tfoot的pageSize，Ajax提交的時候拼接引數 |
| totalCount | 資料總條數 | Ajax獲取，然后填入 totalCount 中，分頁請求時直接獲取 |
<!-- 條件查詢引數 aname author cid -->
<form action="#">
<p style="text-align: center">
名稱：<input type="text" name="aname" size="15"/>
作者：<input type="text" name="author" size="15"/>
分類：<select name="cid" id="cid">
<option value="https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/0">全部</option>
</select>
<input type="button" value = "https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/搜索" id = "searchAnimes" />
</p>
</form>
<!-- totalCount -->
共 <span id="totalCount">5</span> 條
<!-- pageSize 和 pageNum -->
每頁
<!-- <span id = "pageSize">5</span> -->
<select name="pageSize" id="pageSize">
<option value="https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/3" selected>3</option>
<option value="https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/5">5</option>
<option value="https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/10">10</option>
</select>
條
當前第 <span id = "pageNum">1</span> 頁 /
5.6.2 分頁標簽
<tfoot>
<tr>
<td colspan="8" style="height: 40px; text-align: center">
<input type="button" value="https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/添加" id="addAnime"/>
<a href="https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/#">首頁</a> |
<a href="https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/#"><<上一頁</a> |
<a href="https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/#">下一頁>></a> |
<a href="https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/#">尾頁</a> |
共 <span id="totalCount">5</span> 條
每頁
<!-- <span id = "pageSize">5</span> -->
<select name="pageSize" id="pageSize">
<option value="https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/3" selected>3</option>
<option value="https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/5">5</option>
<option value="https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/10">10</option>
</select>
條
當前第 <span id = "pageNum">1</span> 頁 /
共 <span id="totalPage">1</span> 頁
</td>
</tr>
</tfoot>
5.6.3 資料總量函式
Ajax請求 分頁查詢的資料總量，并填寫到頁面上，方便后面分頁處理
//設定資料總量 函式
function totalCount(){
//通過 不分頁 的條件查詢，查詢出總資料量
$.getJSON("animes?mothed=animesCount",$("form").serialize() ,function(data){
//定義資料總量
var totalCount = data;
//alert(" totalCount 資料總量："+totalCount);
//獲取資料總量元素
var $totalCount = $("#totalCount");
//重置資料總量
$totalCount.text(totalCount);
});
}
5.6.4 分頁處理函式 (作用類似PageSupport)
包括 上一頁，下一頁的隱藏處理
//分頁處理函式
function pageSearch(pageSize,pageNum,totalPage){
//后去分頁資料
//頁面容量 (頁面容量可以不操作，我是為了可以手動改變頁面容量)
var $pageSize = $("#pageSize");
//當前頁碼
var $pageNum = $("#pageNum");
//頁面總數
var $totalPage = $("#totalPage");
//重置分頁資料
//頁面容量 (頁面容量可以不處理,因為Ajax異步的,頁面不會重繪)
//$pageSize.text(pageSize);
$pageSize.val(pageSize);
//當前頁碼
$pageNum.text(pageNum);
//頁面總數
$totalPage.text(totalPage);
//處理上一頁和下一頁
//上一頁
if(pageNum <= 1){
$("tfoot a:eq(1)").hide();
}else{
$("tfoot a:eq(1)").show();
}
//下一頁
if(pageNum >= totalPage){
$("tfoot a:eq(2)").hide();
}else{
$("tfoot a:eq(2)").show();
}
}
5.6.5 分頁條件查詢 動態顯示資料
- 獲取處理總頁數
- 分頁引數獲取 pageNum，pageSize
- 動態拼接資料
- 處理pageSize,pageNum,totalPage
//===頁面初始化加載，主動分頁條件查詢處理===
//分頁條件查詢處理
pageAnimeList();
//動態 分頁 條件 獲取動漫資料,動態顯示
function pageAnimeList(){
//處理總頁數
totalCount();
//獲取分頁查詢的資料
//頁面容量
var $pageSize = $("#pageSize");
//pageSize 用 <span> 標簽
//var pageSize = $pageSize.text();
//pageSize 用 <select> 標簽
var pageSize = $pageSize.val();
//當前頁碼
var $pageNum = $("#pageNum");
var pageNum = $pageNum.text();
//資料總數
//$.getJSON("animes",$("form").serialize() ,function(data){
//分頁查詢
$.getJSON("animes?mothed=pageAnimes&pageNum="+pageNum+"&pageSize="+pageSize,$("form").serialize() ,function(data){
// 確定資料要動態顯示的位置
var $tbody = $("tbody");
//如果沒有資料，不能顯示分頁和提示暫無資料
if(data =https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/= null || data ==""){
//先清空再，顯示提示資訊
$tbody.empty().append("<tr align='center'><td colspan='8'>暫無資料</td></tr>");
//隱藏 tfoot
$("tfoot").hide();
//直接回傳，因為沒有資料，不需要拼接頁面
return;
}
// 隔行變色
var count = 0;
//定義動態展示內容,如果不定義為空字符的話，一直拼接新資料
var animeCountent = "";
// 資料決議
$(data).each(function(){
// 定義顏色
var bgColor = count % 2 == 1 ? "style='background-color:#ddd;'" : "";
animeCountent +=
"<tr align='center' " + bgColor + ">"
+ "<td>" + this.id + "</td>"
+ "<td>" + this.cname + "</td>"
+ "<td>" + this.name + "</td>"
+ "<td>" + this.author + "</td>"
+ "<td>" + this.actor + "</td>"
+ "<td>" + this.produce + "</td>"
+ "<td>" + this.create_date + "</td>"
+ "<td><a href='https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/modAnime.jsp?id="+this.id
+"&cid="+this.cid
+"&cname="+this.cname
+"&name="+this.name
+"&author="+this.author
+"&actor="+this.actor
+"&produce="+this.produce
+"&create_date="+this.create_date+"'>修改</a> "
+ "<a class='delAnime' href='https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/animes?mothed=delAnime&id="+this.id+"'>洗掉</a>"
+"</td>"
+ "</tr>";
count++;
});
//清空原來的tbody,添加新的資料
$tbody.empty().append(animeCountent);
//有資料就要展示tfoot
$("tfoot").show();
//分頁處理
//獲取總資料量 處理 頁面數量
//資料總量
var $totalCount = $("#totalCount");
var totalCount = $totalCount.text();
//處理總頁數
var totalPage = 1;
if((totalCount%pageSize) == 0){
//alert("totalCount="+totalCount+"pageSize"+pageSize);
totalPage = totalCount/pageSize;
}else{
//alert("totalCount="+totalCount+"pageSize"+pageSize);
totalPage = ((parseInt(totalCount/pageSize))+1);
}
//alert("處理總頁數==>>totalPage==>"+totalPage);
pageSearch(pageSize,pageNum,totalPage);
});
}
//點擊搜索按鈕，根據條件篩選資料
$("#searchAnimes").click(function(){
//分頁條件查詢
pageAnimeList();
});
5.6.6 分頁跳轉處理
//分頁跳轉
//首頁
$("tfoot a:eq(0)").click(function(){
$("#pageNum").text(1);
//分頁條件查詢
pageAnimeList();
return false;
});
// 上一頁
$("tfoot a:eq(1)").click(function(){
var pageNum = parseInt($("#pageNum").text()) - 1;
$("#pageNum").text(pageNum);
//分頁條件查詢
pageAnimeList();
return false;
});
// 下一頁
$("tfoot a:eq(2)").click(function(){
//alert("下一頁");
//alert(parseInt($("#pageNum").text()) + 1);
$("#pageNum").text(parseInt($("#pageNum").text()) + 1);
//分頁條件查詢
pageAnimeList();
return false;
});
// 尾頁
$("tfoot a:eq(3)").click(function(){
$("#pageNum").text(parseInt($("#totalPage").text()));
//分頁條件查詢
pageAnimeList();
return false;
});
5.6.7 修改pageSize
//修改pageSize
//select標簽的change()事件, 切換選項時觸發
$("#pageSize").change(function(){
//獲取修改后的 currentPageSize
var pageSize = $(this).children('option:selected').val();
//修改頁面大小后，再主動查詢一次動漫資料
pageAnimeList();
});
5.6.8 資料總數 和 條件分頁查詢的 servlet
5.6.8.1 資料總數
//條件查詢所有的動漫串列條數
protected void animesCount(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("======= AnimesServlet查詢所有的動漫的總數量==========");
String aname = req.getParameter("aname");
String author = req.getParameter("author");
String cid = req.getParameter("cid");
int totalCount = animeService.animeListCount(aname, author, cid);
String totalCountJson = JSON.toJSONString(totalCount);
System.out.println("AnimesServlet == >animesCount=動漫總條數==>>"+totalCountJson);
System.out.println("=============================================");
resp.getWriter().print(totalCountJson);
}
5.6.8.2 分頁條件查詢
//分頁條件查詢所有的動漫
protected void pageAnimes(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("======= 分頁條件查詢 AnimesServlet查詢所有的動漫串列==========");
//條件查詢引數
String aname = req.getParameter("aname");
String author = req.getParameter("author");
String cid = req.getParameter("cid");
//分頁引數
Integer pageNum = new Integer(req.getParameter("pageNum"));
Integer pageSize = new Integer(req.getParameter("pageSize"));
System.out.println("pageAnimes==> pageNum==>"+pageNum);
System.out.println("pageAnimes==> pageSize==>"+pageSize);
List<Anime> animes = animeService.PageSelectAnimeList(aname, author, cid, pageNum, pageSize);
String animesJson = JSON.toJSONStringWithDateFormat(animes,"yyyy-MM-dd");
System.out.println(animesJson);
System.out.println("=============================================");
resp.getWriter().print(animesJson);
}
5.6.8.3 多個Ajax請求注意點
多個Ajax請求，javaScript無法控制其執行順序，有時候會出錯；
一個請求拿到另外一個請求的rs中資料；（這里資料總條數取到了某條資料的id）
或第二個請求還沒有從rs中取出資料，rs就被關閉(No operations allowed after statement closed.)；
(另外這里還有一個特殊點，我的setvlet請求是同一個類的多個方法通過反射執行的);
這里需要將用來反射呼叫方法的公共 **dopost方法上鎖 synchronized **;
//doPost 方法上鎖，保證一次只有一個請求，就保證 一次只有一個SQL執行，一次只有一個rs,就不會資料錯亂；
@Override
protected synchronized void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//根據請求攜帶的方法引數名引數,呼叫不同業務的處理方法
String mothedName = req.getParameter("mothed") == null ? "animes" : req.getParameter("mothed");
//利用反射，根據方法名呼叫指定方法
try {
Method method = getClass().getDeclaredMethod(mothedName,HttpServletRequest.class,HttpServletResponse.class);
method.setAccessible(true);
method.invoke(this, req,resp);
} catch (Exception e) {
e.printStackTrace();
}
}
5.7 洗掉
5.7.1 動態添加的a標簽 系結事件
直接帶著id到后臺洗掉；
+ "<a class='delAnime' href='https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/animes?mothed=delAnime&id="+this.id+"'>洗掉</a>"
//動態系結事件(當前和以后添加的元素都可以系結)
//$(document).on 系結動態加載子元素的事件
$(document).on('click', '.delAnime', function(){
if(!confirm("是否確認洗掉 ${anime.name }")){
return false;
}
});
5.7.2 洗掉成功后 提示
resp.getWriter().print("<script type='text/javascript'>alert('洗掉成功！！！'); location.href = 'https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/animeList.jsp'</script>");
5.8 修改
這種方式比較的麻煩，攜帶的引數太多，不過也是一個方法，可以擴張一下思維；
+ "<td><a href='https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/modAnime.jsp?id="+this.id
+"&cid="+this.cid
+"&cname="+this.cname
+"&name="+this.name
+"&author="+this.author
+"&actor="+this.actor
+"&produce="+this.produce +"&create_date="+this.create_date+"'>修改</a> "
5.9 添加
<input type="button" value="https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/添加" id="addAnime"/>
//添加按鈕處理 跳轉到添加頁面
$("#addAnime").click(function(){
location.href = "https://www.cnblogs.com/xiaoqigui/archive/2022/08/15/addAnime.jsp";
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/501894.html
標籤：其他