Javaweb08-Ajax項目-分頁條件查詢 + 增刪改

来源:https://www.cnblogs.com/xiaoqigui/archive/2022/08/16/16571253.html
-Advertisement-
Play Games

1、登錄 1.1 登錄form表單 <form action="<%=request.getContextPath()%>/loginAnime" method="get"> <table border="1px" align="center" width="40%" cellspacing="0" ...


1、登錄

1.1 登錄form表單

<form action="<%=request.getContextPath()%>/loginAnime" method="get">
    <table border="1px" align="center" width="40%" cellspacing="0">
        <tr style="hight:60px; font-size:16px;background-color:#B9DEE0">
            <th colspan="2"> 歡迎登錄課工場KH96動漫管理系統 </th>
        </tr>
        <tr>
            <td>用戶名：</td>
            <td>
                <input type="text" name="uname" id="uname" placeholder="請輸入"用戶名> </input> 
        <span id = "showMsg"   style="text-align:center;"></span>
        </td>
    </tr>
<tr>
    <td>用戶密碼：</td>
    <td>
        <input type="password" name="upwd" id="upwd" placeholder="請輸入用戶密碼"> </input> 
</td>
</tr>
<tr>
    <td colspan="2" align="center">
        <input type="submit" value="立即登錄" />
        <input type="reset" value="重新填寫" />
    </td>
</tr>
</table>
</form>
歡迎登錄課工場KH96動漫管理系統
用戶名：
用戶密碼：

1.2 非空判斷 和 Ajax 登錄

<script type="text/javascript">
	$(function(){
		//使用jQuery的Ajax實現非同步登錄
		//監聽表單提交事件，數校驗
		$("form").submit(function(){
			//登錄名校驗
			var userName = $("#uname").val();
			if(userName == null || userName == ""){
				alert("用戶名不能為空");
				return false;
			}
			
			var userPwd = $("#upwd").val();
			if(userPwd == null || userPwd == ""){
				alert("密碼不能為空");
				return false;
			}
			
			//發送請求
			$.post("<%=request.getContextPath()%>/loginAnime",{"userName" : userName,"userPwd":userPwd},function(data){
				 //解析數據
				 //alert("登錄"+data);
				 if(data == "true"){
					 //alert("登錄成功");
					 location.href= "animeList.jsp";
					 
				 }else{
					 alert("登錄失敗");
				 }
			});
			
			//取消表單提交
			return false;
			
		});
		
	});
</script>

1.3 Ajax接收前端返回boolean類型數據

1.3.1 一般AJax請求,$.get,$.post 請求 接收的是 String 類型

//判斷場景
$("form").submit(function(){
    //發送請求
    $.post("<%=request.getContextPath()%>/loginAnime",{"userName" : userName,"userPwd":userPwd},function(data){
        //1.直接使用字元型判斷
        if(data == "true"){
        //2.轉換成boolean類型判斷
        //if(JSON(data) == true)
            //alert("登錄成功");
            location.href= "animeList.jsp";

        }else{
            alert("登錄失敗");
        }
    })
    //取消表單提交
    return false;

});

1.3.2 $.getJSON 接收的是boolean類型

//場景
$("#codeLogin").click(function () {
    $.getJSON("userServlet?method=sendEmail",null ,function(data){
        //判斷添加返回結果
        //alert(data)
        if(data == true){
            alert("請註意接收驗證碼！！！");
            location.href = "emailLogin.jsp";
        }else{
            alert("驗證碼發送失敗！！！");
        }
    });
});

1、刪除

1.1 刪除的a標簽

a標簽是由第一次跳轉到animeList.jsp頁面時，Ajax動態載入的；

href='javascript:void(0);' 取消a標簽的href屬性；

/*
href='javascript:void;'  取消href跳轉,使用Ajax提交請求
animeId = '"+this.id+"'  添加一個animed參數，刪除時方便獲取
class='delAnime'        添加類名，方便動態click綁定事件
*/
+"<a href='javascript:void(0);' animeId = '"+this.id+"' class='delAnime' >刪除</a></td>"

1.2 Ajax 刪除對應的動漫

$("table tbody").on("click",".delAnime",function(){ }）；給動態載入的元素綁定事件；

獲取動漫id通過Ajax請求刪除數據，並通過當前元素的父元素，刪除該元素；（因為非同步刪除的數據，沒有再查詢一次，所以需要，手動刪除動漫數據）;

//點擊刪除，刪除對應的動漫
$("table tbody").on("click",".delAnime",function(){
    //alert($(this).attr("animeId"));

    //確定刪除提示
    if(!confirm("確定要刪除這條數據嗎？")){
        return false;
    }

    //確定要刪除的超鏈接對象
    var $delAnime = $(this);

    //獲取刪除動漫編號
    var animeId = $delAnime.attr("animeId");
    //alert("刪除的編號：" + animeId);

    //使用Ajax,實現非同步刪除
    $.getJSON("animes?mothed=delAnime",{"id":animeId},function(data){
        //判斷刪除成功
        if(data){
            //後臺刪除成功後，當前頁面動漫元素數據頁刪除
            $delAnime.parents("tr").remove();
            alert("刪除成功");
        }else{
            alert("刪除失敗");
        }
    })
});

1.3 onClick(), click(),on綁定 click 三者區別

1.3.1 onClick()綁定事件

onClick(函數名，或者是js代碼片段)用於綁定事件，告訴瀏覽器在滑鼠點擊時候要做什麼；

//場景1：
<button id="" onClick("functionName()")>點擊 </button>
點擊觸發函數

//場景2：直接再onClick="" 中寫函數內容
<a class="deleteUser" href="/userServlet?method=userDel&id=${user.id}"  onClick="return confirm('是否確認刪除${user.userName}用戶')" >刪除</a>

1.3.2 $("selected")click(function(){}); 方法

  • 註意：不可以給Ajax動態添加的元素，綁定click()方法;
  • 一般click(function() {})就夠用了，註意Ajax載入的元素的時候就好；
//確認按鈕使用的場景
$("#save").click(function () {
    if(confirm("是否確認修改信息？")){
        $("#userForm").submit();
    }
});

1.3.3 $("table tbody").on("click",".delAnime",function(){}）

  • $("父級元素").on("事件","子級元素，一般寫類名",function( ){} );
//點擊刪除，刪除對應的動漫
$("table tbody").on("click",".delAnime",function(){
    //使用Ajax,實現非同步刪除
    $.getJSON("animes?mothed=delAnime",{"id":animeId},function(data){
        //判斷刪除成功
        if(data){
            //後臺刪除成功後，當前頁面動漫元素數據頁刪除
            $delAnime.parents("tr").remove();
            alert("刪除成功");
        }else{
            alert("刪除失敗");
        }
    })
});

2、修改

2.1 修改a標簽

將要修改的數據的id,帶過去，方便修改頁面獲取，需要修改的數據；

/*
href='modAnime.jsp?id="+this.id+"&cid="+this.cid+"'
跳轉到到修改頁面
參數id 是動漫的id,通過id查詢對應動漫的數據，並數據回顯，方便修改
cid 是動漫的的類型，方便選定動漫類型
*/

+ "<td><a href='modAnime.jsp?id="+this.id+"&cid="+this.cid+"' >修改</a>&nbsp;&nbsp;"

2.2 Ajax 動漫數據回顯

由於是使用Ajax直接跳轉到修改動漫的頁面，無法攜帶要修改的動漫id，於是就取巧的，將參數放在導航欄rul中，然後獲取url,使用字元操作，獲取到攜帶在rul中的參數(動漫id);

// 從url中獲取參數函數，使用正則表達式
function getUrlParam(name) {
    //構造一個含有目標參數的正則表達式對象
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    //匹配目標參數
    var r = window.location.search.substr(1).match(reg);
    //返回參數
    if (r != null) {
        return unescape(r[2]);
    }
    return null;
}


//返回按鈕
$("input[type=button]").click(function(){
    history.back();
});

//根據id查詢數據 數據回顯
$.getJSON("animes?mothed=animeById",{"id":getUrlParam("id")} ,function(data){
    $("input[name=id]").val(data.id);
    $("input[name=aname]").val(data.name);
    $("input[name=author]").val(data.author);
    $("input[name=actor]").val(data.actor);
    $("input[name=produce]").val(data.produce);
    $("input[name=createDate]").val(data.create_date);
});

2.3 Ajax修改動漫信息

$("form").serialize(),獲取提交表單中的參數；

$("form").serialize()：可直接獲取到表單中的參數，並不一定需要submit()事件；

$(selector).serialize():serialize()方法通過序列化表單值，創建標準的URL編碼文本字元串,selector可以是input標簽，文本框，或者是form元素本身；

$("form").submit(function(){ }); form表單提交事件，點擊submit 標簽時觸發；

或 $("form").submit(); 主動觸發表單提交事件；

//非同步請求修改動漫，並跳轉會展示頁面
//修改動漫詳情
$("form").submit(function(){
    //發送Ajax非同步請求，修改動漫
    $.getJSON("animes?mothed=modAnime",$("form").serialize() ,function(data){
        //判斷添加返回結果
        if(data){
            alert("動漫修改成功");
            location.href="animeList.jsp";
        }else{
            alert("修改動漫失敗！！");
        }
    });

    //去除表單提交事件
    return false;
});

3、添加

3.1 跳轉到添加頁面

添加動漫，不需要攜帶參數，可直接跳轉；

<input type="button" value="添加" id="addAnime"/>&nbsp;&nbsp;

//點擊添加，跳轉到添加動漫頁面
$("#addAnime").click(function(){
	location.href = "addAnime.jsp";
})

3.2 Ajax 添加動漫詳情

$("form").serialize() 獲取表單的參數；

//$("form").serialize() 獲取表單的參數，作為非同步請求的參數
//新增動漫詳情
$("form").submit(function(){
    //發送Ajax非同步請求，新增動漫

    $.getJSON("animes?mothed=addAnime",$("form").serialize() ,function(data){
        //判斷添加返回結果
        if(data){
            alert("添加動漫成功");
            location.href="animeList.jsp";

        }else{
            alert("添加動漫失敗！！");
        }
    });

    //去除表單提交事件
    return false;
});

4、分頁條件查詢

一般會先做分頁條件查詢再做增刪改；

步驟 : 查詢所有的數據 -> 條件查詢所有數據 ->分頁條件查詢所有數據；(慢慢遞進，不容易出錯)；

4.1 參數

參數 說明 提交
aname 條件查詢參數 表單提交
author 條件查詢參數 表單提交
cid 條件查詢參數 表單提交
pageNo 當前頁面頁碼 獲取tfoot的currPageNo，填入form表單隱藏的pageNo中
pageSize 頁面大小 獲取tfoot的currentPageSize，填入form表單隱藏的pageSize中
totalCount 數據總條數 請求數據中，根據條件查詢參數先查詢數據總條數

條件查詢的參數一般都會在表單中，可以直接使用；（Ajax請求，不需要數據回顯，如果是請求跳轉，需要數據回顯）；

分頁的參數我們為了提交表單請求的時候，可以獲取到分頁參數，就將其他需要的參數隱藏在表單中(只要是查詢需要的參數，都可以放這裡，比較方便servlet的獲取)；

<!--
條件查詢的參數：aname，author，cid
分頁的參數：pageNo，pageSize
(分頁必須參數，還有數據的總量 totalCount )
-->
<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="0">全部</option>
        </select>
        <input type="button" value = "搜索" id = "searchAnimes" />
    </p>
    <!-- 當前頁面參數 和 頁面容量-->
    <input type="hidden" name="pageNo" id="pageNo" value="1"/>
    <input type="hidden" name="pageSize" id="pageSize" value="3"/>
</form>

4.2 分頁標簽

分頁參數會顯示在非提交表單中，需要獲取並放到表單中對應的隱藏標簽中；

<tfoot>
    <tr>
        <td colspan="8" style="height: 40px; text-align: center">
            <input type="button" value="添加" id="addAnime"/>&nbsp;&nbsp;
            <a href="#">首頁</a>&nbsp;|&nbsp;
            <a href="#" id="lastPage">&lt;&lt;上一頁</a>&nbsp;|&nbsp;
            <a href="#" id="nextPage">下一頁&gt;&gt;</a>&nbsp;|&nbsp;
            <a href="#">尾頁</a>&nbsp;|&nbsp;
            共&nbsp;<span id="totalCount"></span>&nbsp;條&nbsp;&nbsp;
            每頁&nbsp;
            <!--   <span id = "currentPageSize"></span> -->
            <select name="currentPageSize" id="currentPageSize">
            </select>
            &nbsp;條&nbsp;
            當前第&nbsp;<span id="currPageNo"></span>&nbsp;頁&nbsp;/&nbsp;
            共&nbsp;<span id="totalPage"></span>&nbsp;頁
        </td>
    </tr>
</tfoot>

4.3 分頁Ajax

1、$("form").serialize() 獲取查詢條件和分頁參數

2、發起請求獲取返回的data(pageSupport),判斷 動漫列表 (pageSupport.data)是否為null,如果為null就隱藏tfoot，且顯示暫無數據；

3、顯示返回的分頁參數；

4、上一頁，下一頁的隱藏處理；
1). $("#lastPage").hide(); $("#lastPage") .show();

2). $("#lastPage").css("display","none"); $("#lastPage").css("display","inline");

5、動態拼接數據；

6、只要有數據展示，就說明需要展示tfoot;

//頁面初始化載入，主動查詢列表
showPageAnimeList();

//動態獲取動漫數據,動態顯示 條件分頁查詢
function showPageAnimeList(){
    $.getJSON("animes?mothed=animesUsePage",$("form").serialize() ,function(data){
        //alert(data);
        // 確定數據要動態顯示的位置
        var $tbody = $("tbody");

        //如果沒有數據，不能顯示分頁和提示暫無數據
        if(data.data == null || data.data == ""){
            //先清空再，顯示提示信息
            $tbody.empty().append("<tr align='center'><td colspan='8'>暫無數據</td></tr>");
            //隱藏 tfoot
            $("tfoot").hide();
            //直接返回，因為沒有數據，不需要拼接頁面
            return;
        }

        // 顯示分頁數據
        $("#totalCount").text(data.titalCount);
        $("#currentPageSize").text(data.pageSize);
        $("#currPageNo").text(data.currPageNo);
        $("#totalPage").text(data.totalPage);

        //上一頁  和  下一頁處理
        if(data.currPageNo == 1){
            $("#lastPage").hide();
        }else{
            $("#lastPage").show();
        }

        if(data.currPageNo == data.totalPage){
            $("#nextPage").hide();
        }else{
            $("#nextPage").show();
        }

        // 隔行變色
        var count = 1;

        //定義動態展示內容,如果不定義為空字元的話，一直拼接新數據
        var animeCountent = "";

        // 數據解析
        $(data.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='modAnime.jsp?id="+this.id+"&cid="+this.cid+"' >修改</a>&nbsp;&nbsp;"
                +"<a href='javascript:void;' animeId = '"+this.id+"' class='delAnime' >刪除</a></td>"
                + "</tr>";

            count++;
        });
        $tbody.empty().append(animeCountent);
        //有數據就要展示tfoot
        $("tfoot").show();
    });
}

//點擊搜索按鈕，根據條件篩選數據
$("#searchAnimes").click(function(){
    showPageAnimeList();
});

4.4 頁面跳轉Ajax

改變form表單中pageNo的值，並調用分頁條件查詢函數 showPageAnimeList();

改變form表單中pageNo的值方法：

  1. 通過id選擇input標簽再賦值：$("#pageNo").val(1);
  2. 直接改表單指定name屬性值的input標簽賦值：document.forms[0].pageNo.value = 1;
//分頁跳轉
//首頁
$("tfoot a:eq(0)").click(function(){
    //通過id選擇input標簽再賦值
    //$("#pageNo").val(1);
    //直接改表單指定name屬性值的input標簽賦值
    document.forms[0].pageNo.value = 1;
    showPageAnimeList();
    return false;
});

// 上一頁
$("tfoot a:eq(1)").click(function(){
    $("#pageNo").val(parseInt($("#currPageNo").text()) - 1);
    showPageAnimeList();
    return false;
});


// 下一頁
$("tfoot a:eq(2)").click(function(){
    $("#pageNo").val(parseInt($("#currPageNo").text()) + 1);
    showPageAnimeList();
    return false;
});

// 尾頁
$("tfoot a:eq(3)").click(function(){
    $("#pageNo").val(parseInt($("#totalPage").text()));
    showPageAnimeList();
    return false;
});

4.5 PageSupport

T 表示數據的類型，一般是數據列表List

我感覺比較好的設計話可以是條件分頁查詢所有參數全部放裡面 （只是想法，這裡沒有用）:

  • T:為自定義泛型的數據(一般為List);

  • List ：為條件查詢的參數，做回顯數據 (考慮到類型不確定和數量不確定，也可以是動態數組，先用集合添加，然後toArray轉為數組);

  • 數據量，當前頁，和總頁數

public class PageSupport<T> {
	//當前頁,顯示頁碼
	private int currPageNo = 1;
	
	//頁面容量
	private int pageSize = 3;

	//總條數(帶條件查詢的總條數)
	private int totalCount;
	
	//總頁數(根據總條數和頁面容量)
	private int totalPage;
    
	//分頁條件查詢的數據
	private T data;
    ......
    public void setTotalCount(int totalCount) {
		//當存在總條數,確定總頁數
		this.totalCount = totalCount;
		//計算總頁數
		this.totalPage = this.totalCount%this.pageSize == 0 ?
				this.totalCount/this.pageSize :
					this.totalCount/this.pageSize + 1;
	}
    ......
}

4.6 Servlet 中的 方法

  • 通過條件，查詢數據總條數
  • 實例化pageSupport
  • 當前頁的特殊頁碼處理
  • 查詢出數據，放進pageSupport 的 data 中
  • 返回pageSupport對象(包含分頁信息，和 條件查詢後分頁的數據)
//查詢所有的動漫列表 帶分頁
protected void animesUsePage(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    //獲取顯示的當前頁碼
    Integer pageNo = Integer.parseInt( req.getParameter("pageNo") == null ? "1" : req.getParameter("pageNo") );
    Integer pageSize = Integer.parseInt( req.getParameter("pageSize") == null ? "3" : req.getParameter("pageSize") );

    //獲取查詢條件
    String searchAname = req.getParameter("aname");
    String searauThor = req.getParameter("author");
    String searCid = req.getParameter("cid");

    //根據條件查詢總數
    int totalCount = animeService.animeCount(searchAname,searauThor,searCid);

    //創建分頁對象
    PageSupport<List<Anime>> pageSupport = new PageSupport<List<Anime>>();
    pageSupport.setPageSize(pageSize);
    pageSupport.setTitalCount(totalCount);

    System.out.println("pageNo==>"+pageNo);

    //頁碼特殊處理
    int currPageNo = pageNo;
    //如果當前頁碼小於1，或數據總量等於0
    if(currPageNo < 1 || pageSupport.getTitalCount() == 0) {
        currPageNo = 1;
    }else if(currPageNo > pageSupport.getTotalPage()){
        //如果當前頁碼大於總頁數
        currPageNo = pageSupport.getTotalPage();
    }


    System.out.println("pageNo======>"+pageNo);
    //設置當前頁碼
    pageSupport.setCurrPageNo(currPageNo);

    //設置分頁數據  分頁條件查詢的數據
    pageSupport.setData(animeService.animeListPage(searchAname, searauThor, searCid, pageNo, pageSize));

    //響應數據
    System.out.println("animesUsePage==》" + JSON.toJSONStringWithDateFormat(pageSupport,"yyyy-MM-dd"));
    resp.getWriter().write(JSON.toJSONStringWithDateFormat(pageSupport,"yyyy-MM-dd"));

}

阿裡巴巴的數據轉為json的jar包： fastjson-1.2.13.jar

JSON.toJSONString(pageSupport)：將數據轉為JSON類型

JSON.toJSONStringWithDateFormat(pageSupport,"yyyy-MM-dd"):將數據轉為JSON類型,並指定其中日期的格式；

4.7 Dao 方法

//條件查詢的數據總量
public int animeCount(String aname, String author, String cid);

//條件查詢後分頁 後的數據集合
public List<Anime> selectAnimeListPage(String aname, String author, String cid, Integer pageNo, Integer pageSize);

//增加分頁SQL語句
executeSql += " order by a.id desc limit ?,?";

paramList.add((pageNo - 1) * pageSize);
paramList.add(pageSize);

4.7.1 條件查詢數據總數

//根據條件查詢 數據總數
@Override
public int animeCount(String aname, String author, String cid) {
    //查詢動漫詳情的SQL語句
    String executeSql = "select count(1) from animes a where 1=1 ";

    //參數集合
    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)) {
        //標記關鍵字 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);
    }

    //條件中有類型
    if(null != cid && !"0".equals(cid)) {
        executeSql += " and a.cid = ?";
        paramList.add(cid);
    }

    //定義返回動漫總數
    int totalCount = 0;

    try {
        // 執行查詢
        this.executeSelect(executeSql, paramList.toArray());

        // 解析查詢結果
        if(rs.next()) {
            totalCount = rs.getInt(1);
        }

    } catch (Exception e) {
        e.printStackTrace();
    } finally {
        //關閉資源
        this.releaseResource(conn, pstmt, rs);
    }

    //返回動漫總數量
    return totalCount;
}

4.7.2 條件分頁查詢數據

//查詢  動態添加查詢條件，並分頁後  的數據集合
@Override
public List<Anime> selectAnimeListPage(String aname, String author, String cid, Integer pageNo, Integer pageSize) {
    //查詢動漫詳情的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 ";

    //動態參數，推薦使用
    List<Object> paramList = new ArrayList<Object>();

    //根據不同的查詢條件，拼接SQL語句和參數
    //條件中有動漫名
    if(null != aname && !"".equals(aname)) {
        //模糊匹配
        executeSql += " and a.name like concat('%',?,'%')";

        //System.out.println("模糊匹配且標記後的SQL=>"+executeSql);

        paramList.add(aname);
    }

    //條件中有作者
    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('%',?,'%')";

        System.out.println("模糊匹配且標記後的SQL=>"+executeSql);

        paramList.add(author);
    }

    //條件中有類型
    if(null != cid && !"0".equals(cid)) {
        executeSql += " and a.cid = ?";
        paramList.add(cid);
    }

    //增加分頁SQL語句
    executeSql += " order by a.id desc limit ?,?";

    paramList.add((pageNo - 1) * pageSize);
    paramList.add(pageSize);

    //定義返回動漫列表的數據集合
    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、動態修改pageSize

5.1html

tfoot中可以選擇的pageSize,currentPageSize，動態改變後，需要填寫到form表單中的pageSize;

每頁&nbsp;
<!--   <span id = "currentPageSize"></span> -->
<select name="currentPageSize" id="currentPageSize">
</select>
&nbsp;條&nbsp;

5.2 動態載入pageSize

//pageSize 請求獲取一個JSONString類型的PageSize對象集合
//[{"size":3},{"size":5},{"size":10}]
//獲取PageSize,動態展示
$.getJSON("pageSize",function(data){
    //alert(data);
    //定位currentPageSize的下拉元素
    var $currentPageSize = $("#currentPageSize");

    //遍歷返回的分類集合json集合數，動態載入分類選項
    $(data).each(function(){
        //alert(this.size);
        $currentPageSize.append("<option value='"+this.size+"' class='currentPageSize' >"+this.size+"</option>");
    });

});

5.3 改變psgeSize後觸發事件

  • 觸發事件：

select標簽的選項切換觸發事件change()，

  • 獲取切換的值

$(this).children('option:selected').val(); 獲取被選中的選項的值；

修改表單隱藏的pageSize的value值；

  • 這一類修改下麵的可選值時，需要將值設置到表單中；

將值放到表單中兩種方式：(跟頁面跳轉一樣)

1、通過id選擇賦值：$("#pageSize").val(currentPageSize);

2、通過直接給表單的指定name屬性值的input標簽賦值：

document.forms[0].pageSize.value = currentPageSize;

pageSize 為 input標簽的name屬性值；

 //修改pageSize
//select標簽的change()事件, 切換選項時觸發
$("#currentPageSize").change(function(){
    //獲取修改後的 currentPageSize
    var currentPageSize = $(this).children('option:selected').val();
    //alert(currentPageSize);        	
    //修改提交表單的pageSize
    //$("#pageSize").val(currentPageSize);
    //通過document.forms[0].pageSize.value  pageSize 為 input標簽的name屬性值
    document.forms[0].pageSize.value =  currentPageSize;
    //修改頁面大小後，再主動查詢一次動漫數據
    showPageAnimeList();
});

6、單例模式

模式 特點
懶漢模式 類載入時，不會主動創建對象，而是當記憶體中需要且沒有該類的實例時，才會創建(存線上程不安全)雙重校驗
餓漢模式 類載入時，直接創建實例對象，放入記憶體中，需要使用的時候，直接返回，不存線上程不安全

6.1 JdbcConfig

資料庫配置信息讀取類(使用單例模式,保證數據讀取配置程式運行過程中,只會讀取一次 ）；

//資料庫配置信息讀取類(使用單例模式,保證數據讀取配置程式運行過程中,只會讀取一次 jdbc.properties)
public class JdbcConfig {
	//創建 Properties 對象，必須全局，私有()只有內部才可以使用
	Properties properties;
	
	//懶漢:類載入時，不會主動創建對象，而是當記憶體中沒有該類的實例時，才會創建
	//靜態：下麵要提供一個獲取實例的靜態方法，getInstance
	//private static JdbcConfig JdbcConfig;
	
	//餓漢：類載入時，直接創建實例對象，放入記憶體中，需要使用的時候，直接返回，不存線上程不安全
	private static JdbcConfig JdbcConfig = new JdbcConfig();
	
	
	//私有構造方法，保證處理在當前類中，其他任何地方鬥不可以創建實例
	private JdbcConfig() {
		try {
			//自動實例化  properties
			properties = new Properties();
			
			// 使用反射機制，讀取外部配置文件
			InputStream inputStream = JdbcConfig.class.getClassLoader().getResourceAsStream("jdbc.properties");
			
			// 載入輸入流對象，獲取配置文件內容
			properties.load(inputStream);
			
			System.out.println("------創建JdbcConfig實例成功-------");
		} catch (Exception e) {
			e.printStackTrace();
		}
		// 創建Properties屬性對象
	}
	
	
	/*
	 * 單例模式 ：在程式運行期間，保證當前類的實例只有一個，而且是唯一的一個
	 * 懶漢
	 */
//	public static JdbcConfig getInstance() {
//		
//		//判斷記憶體中是否存在JdbcConfig 對象實例，如果不存在就創建實例
//		if(null == JdbcConfig) {
//			//懶漢，不是線程安全的，可以使用雙重校驗檢查，實現多線程，確保單例
//			//加同步鎖，如果有一個線程獲取到同步鎖，其他線程等待
//			synchronized (JdbcConfig.class) {
//				//再判斷一次，記憶體是否存在JdbcConfig實例
//				if(null == JdbcConfig) {
//					//創建一個讀取資料庫配置實例對象，放入記憶體，創建對象時就自動讀取數據配置信息
//					JdbcConfig = new JdbcConfig();
//				}
//			}
//		}
//		
//		return JdbcConfig;
//	}
	
	//餓漢
	public static JdbcConfig getInstance() {
		return JdbcConfig;
	}
	
	//提供一個公共的讀取配置文件的方法
	public String getPropertyByKey(String key) {
		return properties.getProperty(key);
	}

}

6.2 改進後的Basedao

其他不變，只是獲取配置信息的方式改變了；

直接使用JdbcConfig獲取配置信息；

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");
			
			String driverClass = JdbcConfig.getInstance().getPropertyByKey("driverClass");
			String jdbcUrl =  JdbcConfig.getInstance().getPropertyByKey("jdbcUrl");
			String user =  JdbcConfig.getInstance().getPropertyByKey("user");
			String password =  JdbcConfig.getInstance().getPropertyByKey("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();
		}
	}

}

7、註意點

7.1當一個頁面多個Ajax請求，可能會數據錯亂

需要對 dopost方法進行加鎖（synchronized）操作，讓這個方法，一次只能有一個請求；

@Override
protected synchronized void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    //根據請求攜帶的方法參數名參數,調用不同業務的處理方法

    String mothedName = req.getParameter("method") == null ? "test" : req.getParameter("method");

    //利用反射，根據方法名調用指定方法
    try {
        Method method = getClass().getDeclaredMethod(mothedName,HttpServletRequest.class,HttpServletResponse.class);
        method.setAccessible(true);
        method.invoke(this, req,resp);
    } catch (Exception e) {
        e.printStackTrace();
    }

}

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MultipartFile上傳文件非同步處理時的java.io.FileNotFoundException
    參考：https://javajgs.com/archives/26157 一.背景 1-1 需求 前端上傳Word文檔，後端將接收到的Word文檔①上傳到文件伺服器②將Word轉為Pdf。 1-2 方案 因為Word轉Pdf的耗時較長，為了及時給到前端返回信息，在將文件上傳到文件伺服器後，非同步將W ...
  • python-map()函數基本用法
    最近經常遇到一個問題：輸入端在同一行輸入兩個整型數字，並用空格間隔，問如何方便快捷的將這兩個變數分別賦予給x1,x2？ 新手小白，由於不知道map（）函數的用法，便想要用僅有的知識去解決它： 1 list1=[int(i) for i in input().split()] 2 x1=list1[0 ...
  • 基本數據類型概述
    常用類 筆記目錄：(https://www.cnblogs.com/wenjie2000/p/16378441.html) 包裝類 包裝類的分類 針對八種基本數據類型相應的引用類型—包裝類 有了類的特點，就可以調用類中的方法。 | 基本數據類型 | 包裝類 | | | | | boolean | B ...
  • 光說不練假把式，一起Kafka業務實戰。
    7.1 順序性場景 7.1.1 場景概述 假設我們要傳輸一批訂單到另一個系統，那麼訂單對應狀態的演變是有順序性要求的。 已下單 → 已支付 → 已確認 不允許錯亂！ 7.1.2 順序級別 1）全局有序： 串列化。每條經過kafka的消息必須嚴格保障有序性。 這就要求kafka單通道，每個groupi ...
  • Dubbo源碼(八) - 負載均衡
    前言 本文基於Dubbo2.6.x版本，中文註釋版源碼已上傳github：xiaoguyu/dubbo 負載均衡，英文名稱為Load Balance，其含義就是指將負載（工作任務）進行平衡、分攤到多個操作單元上進行運行。 例如：在Dubbo中，同一個服務有多個服務提供者，每個服務提供者所在的機器性能 ...
  • RocketMQ保姆級教程
    大家好，我是三友~~ 上周花了一點時間從頭到尾、從無到有地搭建了一套RocketMQ的環境，覺得還挺easy的，所以就寫篇文章分享給大家。 整篇文章可以大致分為三個部分，第一部分屬於一些核心概念和工作流程的講解；第二部分就是純手動搭建了一套環境；第三部分是基於環境進行測試和集成到SpringBoot ...
  • Pytest框架 — 08、Pytest的Fixture（部分前後置）(三)
    8、Fixture帶返回值 在fixture中我們可以使用yield或者return來返回我們需要的東西，如測試數據，資料庫連接對象，文件對象等。 沒有後置處理 直接採用return的方式返回數據（yield也可以） import pytest @pytest.fixture() def data_ ...
  • Java註解最全詳解(超級詳細)
    Java註解是一個很重要的知識點，掌握好Java註解有利於學習Java開發框架底層實現。@mikechen Java註解定義 Java註解又稱Java標註，是在 JDK5 時引入的新特性，註解（也被稱為元數據）。 Java註解它提供了一種安全的類似註釋的機制，用來將任何的信息或元數據（metadat ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類