Javaweb08-Ajax项目-分页条件查询 + 增删改

1、登录

1.1 登录form表单

1. <form action="<%=request.getContextPath()%>/loginAnime" method="get">
2.     <table border="1px" align="center" width="40%" cellspacing="0">
3.         <tr >
4.             <th colspan="2"> 欢迎登录课工场KH96动漫管理系统 </th>
5.         </tr>
6.         <tr>
7.             <td>用户名：</td>
8.             <td>
9.                 <input type="text" name="uname" id="uname" placeholder="请输入"用户名> </input>
10.         
11.         </td>
12.     </tr>
13. <tr>
14.     <td>用户密码：</td>
15.     <td>
16.         <input type="password" name="upwd" id="upwd" placeholder="请输入用户密码"> </input>
17. </td>
18. </tr>
19. <tr>
20.     <td colspan="2" align="center">
21.         <input type="submit" value="立即登录" />
22.         <input type="reset" value="重新填写" />
23.     </td>
24. </tr>
25. </table>
26. </form>

复制代码

                                         欢迎登录课工场KH96动漫管理系统                                                                                 用户名：                                                                                                                                                                                                                                  用户密码：                                                                                                                                                                                                                                                                                                                                          1.2 非空判断 和 Ajax 登录

1. [/code][size=4]1.3 Ajax接收前端返回boolean类型数据[/size]
3. [size=3]1.3.1 一般AJax请求,$.get,$.post 请求 接收的是 String 类型[/size]
5. [code]//判断场景
6. $("form").submit(function(){
7.     //发送请求
8.     $.post("<%=request.getContextPath()%>/loginAnime",{"userName" : userName,"userPwd":userPwd},function(data){
9.         //1.直接使用字符型判断
10.         if(data == "true"){
11.         //2.转换成boolean类型判断
12.         //if(JSON(data) == true)
13.             //alert("登录成功");
14.             location.href= "animeList.jsp";
16.         }else{
17.             alert("登录失败");
18.         }
19.     })
20.     //取消表单提交
21.     return false;
23. });

复制代码

1.3.2 $.getJSON 接收的是boolean类型

1. //场景
2. $("#codeLogin").click(function () {
3.     $.getJSON("userServlet?method=sendEmail",null ,function(data){
4.         //判断添加返回结果
5.         //alert(data)
6.         if(data == true){
7.             alert("请注意接收验证码！！！");
8.             location.href = "emailLogin.jsp";
9.         }else{
10.             alert("验证码发送失败！！！");
11.         }
12.     });
13. });

复制代码

1、删除

1.1 删除的a标签

a标签是由第一次跳转到animeList.jsp页面时，Ajax动态加载的；
href='javascript:void(0);'  取消a标签的href属性；

1. /*
2. href='javascript:void;'  取消href跳转,使用Ajax提交请求
3. animeId = '"+this.id+"'  添加一个animed参数，删除时方便获取
4. class='delAnime'        添加类名，方便动态click绑定事件
5. */
6. +"<a target="_blank" href='https://www.cnblogs.com/javascript:void(0);' animeId = '"+this.id+"' class='delAnime' >删除</a></td>"

复制代码

1.2 Ajax 删除对应的动漫

$("table tbody").on("click",".delAnime",function(){ }）；给动态加载的元素绑定事件；
获取动漫id通过Ajax请求删除数据，并通过当前元素的父元素，删除该元素；（因为异步删除的数据，没有再查询一次，所以需要，手动删除动漫数据）;

1. //点击删除，删除对应的动漫
2. $("table tbody").on("click",".delAnime",function(){
3.     //alert($(this).attr("animeId"));
5.     //确定删除提示
6.     if(!confirm("确定要删除这条数据吗？")){
7.         return false;
8.     }
10.     //确定要删除的超链接对象
11.     var $delAnime = $(this);
13.     //获取删除动漫编号
14.     var animeId = $delAnime.attr("animeId");
15.     //alert("删除的编号：" + animeId);
17.     //使用Ajax,实现异步删除
18.     $.getJSON("animes?mothed=delAnime",{"id":animeId},function(data){
19.         //判断删除成功
20.         if(data){
21.             //后台删除成功后，当前页面动漫元素数据页删除
22.             $delAnime.parents("tr").remove();
23.             alert("删除成功");
24.         }else{
25.             alert("删除失败");
26.         }
27.     })
28. });

复制代码

1.3 onClick(), click(),on绑定 click 三者区别

1.3.1 onClick()绑定事件

onClick(函数名，或者是js代码片段)用于绑定事件，告诉浏览器在鼠标点击时候要做什么；

1. //场景1：
2. <button id="" onClick("functionName()")>点击 </button>
3. 点击触发函数

复制代码

1. //场景2：直接再onClick="" 中写函数内容
2. <a  target="_blank" href="https://www.cnblogs.com/userServlet?method=userDel&id=${user.id}"  onClick="return confirm('是否确认删除${user.userName}用户')" >删除</a>

复制代码

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

• 注意：不可以给Ajax动态添加的元素，绑定click()方法;
  
• 一般click(function() {})就够用了，注意Ajax加载的元素的时候就好；
  

1. //确认按钮使用的场景
2. $("#save").click(function () {
3.     if(confirm("是否确认修改信息？")){
4.         $("#userForm").submit();
5.     }
6. });

复制代码

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

• $("父级元素").on("事件","子级元素，一般写类名",function( ){} );
  

1. //点击删除，删除对应的动漫
2. $("table tbody").on("click",".delAnime",function(){
3.     //使用Ajax,实现异步删除
4.     $.getJSON("animes?mothed=delAnime",{"id":animeId},function(data){
5.         //判断删除成功
6.         if(data){
7.             //后台删除成功后，当前页面动漫元素数据页删除
8.             $delAnime.parents("tr").remove();
9.             alert("删除成功");
10.         }else{
11.             alert("删除失败");
12.         }
13.     })
14. });

复制代码

2、修改

2.1 修改a标签

将要修改的数据的id,带过去，方便修改页面获取，需要修改的数据；

1. /*
2. href='modAnime.jsp?id="+this.id+"&cid="+this.cid+"'
3. 跳转到到修改页面
4. 参数id 是动漫的id,通过id查询对应动漫的数据，并数据回显，方便修改
5. cid 是动漫的的类型，方便选定动漫类型
6. */
8. + "<td><a target="_blank" href='https://www.cnblogs.com/modAnime.jsp?id="+this.id+"&cid="+this.cid+"' >修改</a>  "

复制代码

2.2 Ajax 动漫数据回显

由于是使用Ajax直接跳转到修改动漫的页面，无法携带要修改的动漫id，于是就取巧的，将参数放在导航栏rul中，然后获取url,使用字符操作，获取到携带在rul中的参数(动漫id);

1. // 从url中获取参数函数，使用正则表达式
2. function getUrlParam(name) {
3.     //构造一个含有目标参数的正则表达式对象
4.     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
5.     //匹配目标参数
6.     var r = window.location.search.substr(1).match(reg);
7.     //返回参数
8.     if (r != null) {
9.         return unescape(r[2]);
10.     }
11.     return null;
12. }
15. //返回按钮
16. $("input[type=button]").click(function(){
17.     history.back();
18. });
20. //根据id查询数据 数据回显
21. $.getJSON("animes?mothed=animeById",{"id":getUrlParam("id")} ,function(data){
22.     $("input[name=id]").val(data.id);
23.     $("input[name=aname]").val(data.name);
24.     $("input[name=author]").val(data.author);
25.     $("input[name=actor]").val(data.actor);
26.     $("input[name=produce]").val(data.produce);
27.     $("input[name=createDate]").val(data.create_date);
28. });       

复制代码

2.3 Ajax修改动漫信息

$("form").serialize(),获取提交表单中的参数；
$("form").serialize()：可直接获取到表单中的参数，并不一定需要submit()事件；
$(selector).serialize():serialize()方法通过序列化表单值，创建标准的URL编码文本字符串,selector可以是input标签，文本框，或者是form元素本身；
$("form").submit(function(){ }); form表单提交事件，点击submit 标签时触发；
或 $("form").submit(); 主动触发表单提交事件；

1. //异步请求修改动漫，并跳转会展示页面
2. //修改动漫详情
3. $("form").submit(function(){
4.     //发送Ajax异步请求，修改动漫
5.     $.getJSON("animes?mothed=modAnime",$("form").serialize() ,function(data){
6.         //判断添加返回结果
7.         if(data){
8.             alert("动漫修改成功");
9.             location.href="animeList.jsp";
10.         }else{
11.             alert("修改动漫失败！！");
12.         }
13.     });
15.     //去除表单提交事件
16.     return false;
17. });

复制代码

3、添加

3.1 跳转到添加页面

添加动漫，不需要携带参数，可直接跳转；

1. <input type="button" value="添加" id="addAnime"/>  
3. //点击添加，跳转到添加动漫页面
4. $("#addAnime").click(function(){
5.         location.href = "addAnime.jsp";
6. })

复制代码

3.2 Ajax 添加动漫详情

$("form").serialize() 获取表单的参数；

1. //$("form").serialize() 获取表单的参数，作为异步请求的参数
2. //新增动漫详情
3. $("form").submit(function(){
4.     //发送Ajax异步请求，新增动漫
6.     $.getJSON("animes?mothed=addAnime",$("form").serialize() ,function(data){
7.         //判断添加返回结果
8.         if(data){
9.             alert("添加动漫成功");
10.             location.href="animeList.jsp";
12.         }else{
13.             alert("添加动漫失败！！");
14.         }
15.     });
17.     //去除表单提交事件
18.     return false;
19. });

复制代码

4、分页条件查询

一般会先做分页条件查询再做增删改；
步骤 : 查询所有的数据 -> 条件查询所有数据 ->分页条件查询所有数据；(慢慢递进，不容易出错)；
4.1 参数

参数说明提交aname条件查询参数表单提交author条件查询参数表单提交cid条件查询参数表单提交pageNo当前页面页码获取tfoot的currPageNo，填入form表单隐藏的pageNo中pageSize页面大小获取tfoot的currentPageSize，填入form表单隐藏的pageSize中totalCount数据总条数请求数据中，根据条件查询参数先查询数据总条数条件查询的参数一般都会在表单中，可以直接使用；（Ajax请求，不需要数据回显，如果是请求跳转，需要数据回显）；
分页的参数我们为了提交表单请求的时候，可以获取到分页参数，就将其他需要的参数隐藏在表单中(只要是查询需要的参数，都可以放这里，比较方便servlet的获取)；

1. <form action="#">
2.     <p >
3.         名称：<input type="text" name="aname" size="15"/>
4.         作者：<input type="text" name="author" size="15"/>
5.         分类：<select name="cid" id="cid">
6.         <option value="0">全部</option>
7.         </select>
8.         <input type="button" value = "搜索" id = "searchAnimes" />
9.     </p>
10.    
11.     <input type="hidden" name="pageNo" id="pageNo" value="1"/>
12.     <input type="hidden" name="pageSize" id="pageSize" value="3"/>
13. </form>

复制代码

4.2 分页标签

分页参数会显示在非提交表单中，需要获取并放到表单中对应的隐藏标签中；

1. <tfoot>
2.     <tr>
3.         <td colspan="8" >
4.             <input type="button" value="添加" id="addAnime"/>  
5.             <a target="_blank" href="https://www.cnblogs.com/#">首页</a> | 
6.             <a target="_blank" href="https://www.cnblogs.com/#" id="lastPage"><<上一页</a> | 
7.             <a target="_blank" href="https://www.cnblogs.com/#" id="nextPage">下一页>></a> | 
8.             <a target="_blank" href="https://www.cnblogs.com/#">尾页</a> | 
9.             共  条  
10.             每页 
11.             
12.             <select name="currentPageSize" id="currentPageSize">
13.             </select>
14.              条 
15.             当前第  页 / 
16.             共  页
17.         </td>
18.     </tr>
19. </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;

1. //页面初始化加载，主动查询列表
2. showPageAnimeList();
4. //动态获取动漫数据,动态显示 条件分页查询
5. function showPageAnimeList(){
6.     $.getJSON("animes?mothed=animesUsePage",$("form").serialize() ,function(data){
7.         //alert(data);
8.         // 确定数据要动态显示的位置
9.         var $tbody = $("tbody");
11.         //如果没有数据，不能显示分页和提示暂无数据
12.         if(data.data == null || data.data == ""){
13.             //先清空再，显示提示信息
14.             $tbody.empty().append("<tr align='center'><td colspan='8'>暂无数据</td></tr>");
15.             //隐藏 tfoot
16.             $("tfoot").hide();
17.             //直接返回，因为没有数据，不需要拼接页面
18.             return;
19.         }
21.         // 显示分页数据
22.         $("#totalCount").text(data.titalCount);
23.         $("#currentPageSize").text(data.pageSize);
24.         $("#currPageNo").text(data.currPageNo);
25.         $("#totalPage").text(data.totalPage);
27.         //上一页  和  下一页处理
28.         if(data.currPageNo == 1){
29.             $("#lastPage").hide();
30.         }else{
31.             $("#lastPage").show();
32.         }
34.         if(data.currPageNo == data.totalPage){
35.             $("#nextPage").hide();
36.         }else{
37.             $("#nextPage").show();
38.         }
40.         // 隔行变色
41.         var count = 1;
43.         //定义动态展示内容,如果不定义为空字符的话，一直拼接新数据
44.         var animeCountent = "";
46.         // 数据解析
47.         $(data.data).each(function(){
48.             // 定义颜色
49.             var bgColor = count % 2 == 0 ? "style='background-color:#ddd;'" : "";
50.             animeCountent +=
51.                 "<tr align='center' " + bgColor + ">"
52.                 + "<td>" + this.id + "</td>"
53.                 + "<td>" + this.cname + "</td>"
54.                 + "<td>" + this.name + "</td>"
55.                 + "<td>" + this.author + "</td>"
56.                 + "<td>" + this.actor + "</td>"
57.                 + "<td>" + this.produce + "</td>"
58.                 + "<td>" + this.create_date + "</td>"
59.                 + "<td><a target="_blank" href='https://www.cnblogs.com/modAnime.jsp?id="+this.id+"&cid="+this.cid+"' >修改</a>  "
60.                 +"<a target="_blank" href='https://www.cnblogs.com/javascript:void;' animeId = '"+this.id+"' class='delAnime' >删除</a></td>"
61.                 + "</tr>";
63.             count++;
64.         });
65.         $tbody.empty().append(animeCountent);
66.         //有数据就要展示tfoot
67.         $("tfoot").show();
68.     });
69. }
71. //点击搜索按钮，根据条件筛选数据
72. $("#searchAnimes").click(function(){
73.     showPageAnimeList();
74. });

复制代码

4.4 页面跳转Ajax

改变form表单中pageNo的值，并调用分页条件查询函数 showPageAnimeList();
改变form表单中pageNo的值方法：

• 通过id选择input标签再赋值：$("#pageNo").val(1);
  
• 直接改表单指定name属性值的input标签赋值：document.forms[0].pageNo.value = 1;
  

1. //分页跳转
2. //首页
3. $("tfoot a:eq(0)").click(function(){
4.     //通过id选择input标签再赋值
5.     //$("#pageNo").val(1);
6.     //直接改表单指定name属性值的input标签赋值
7.     document.forms[0].pageNo.value = 1;
8.     showPageAnimeList();
9.     return false;
10. });
12. // 上一页
13. $("tfoot a:eq(1)").click(function(){
14.     $("#pageNo").val(parseInt($("#currPageNo").text()) - 1);
15.     showPageAnimeList();
16.     return false;
17. });
20. // 下一页
21. $("tfoot a:eq(2)").click(function(){
22.     $("#pageNo").val(parseInt($("#currPageNo").text()) + 1);
23.     showPageAnimeList();
24.     return false;
25. });
27. // 尾页
28. $("tfoot a:eq(3)").click(function(){
29.     $("#pageNo").val(parseInt($("#totalPage").text()));
30.     showPageAnimeList();
31.     return false;
32. });

复制代码

4.5 PageSupport

T 表示数据的类型，一般是数据列表List
我感觉比较好的设计话可以是条件分页查询所有参数全部放里面 （只是想法，这里没有用）:

• T:为自定义泛型的数据(一般为List);
  
• List ：为条件查询的参数，做回显数据 (考虑到类型不确定和数量不确定，也可以是动态数组，先用集合添加，然后toArray转为数组);
  
  
• 数据量，当前页，和总页数
  

1. public class PageSupport<T> {
2.         //当前页,显示页码
3.         private int currPageNo = 1;
4.        
5.         //页面容量
6.         private int pageSize = 3;
8.         //总条数(带条件查询的总条数)
9.         private int totalCount;
10.        
11.         //总页数(根据总条数和页面容量)
12.         private int totalPage;
13.    
14.         //分页条件查询的数据
15.         private T data;
16.     ......
17.     public void setTotalCount(int totalCount) {
18.                 //当存在总条数,确定总页数
19.                 this.totalCount = totalCount;
20.                 //计算总页数
21.                 this.totalPage = this.totalCount%this.pageSize == 0 ?
22.                                 this.totalCount/this.pageSize :
23.                                         this.totalCount/this.pageSize + 1;
24.         }
25.     ......
26. }   

复制代码

4.6 Servlet 中的 方法

• 通过条件，查询数据总条数
  
• 实例化pageSupport
  
• 当前页的特殊页码处理
  
• 查询出数据，放进pageSupport 的 data 中
  
• 返回pageSupport对象(包含分页信息，和  条件查询后分页的数据)
  

1. //查询所有的动漫列表 带分页
2. protected void animesUsePage(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
3.     //获取显示的当前页码
4.     Integer pageNo = Integer.parseInt( req.getParameter("pageNo") == null ? "1" : req.getParameter("pageNo") );
5.     Integer pageSize = Integer.parseInt( req.getParameter("pageSize") == null ? "3" : req.getParameter("pageSize") );
7.     //获取查询条件
8.     String searchAname = req.getParameter("aname");
9.     String searauThor = req.getParameter("author");
10.     String searCid = req.getParameter("cid");
12.     //根据条件查询总数
13.     int totalCount = animeService.animeCount(searchAname,searauThor,searCid);
15.     //创建分页对象
16.     PageSupport<List<Anime>> pageSupport = new PageSupport<List<Anime>>();
17.     pageSupport.setPageSize(pageSize);
18.     pageSupport.setTitalCount(totalCount);
20.     System.out.println("pageNo==>"+pageNo);
22.     //页码特殊处理
23.     int currPageNo = pageNo;
24.     //如果当前页码小于1，或数据总量等于0
25.     if(currPageNo < 1 || pageSupport.getTitalCount() == 0) {
26.         currPageNo = 1;
27.     }else if(currPageNo > pageSupport.getTotalPage()){
28.         //如果当前页码大于总页数
29.         currPageNo = pageSupport.getTotalPage();
30.     }
33.     System.out.println("pageNo======>"+pageNo);
34.     //设置当前页码
35.     pageSupport.setCurrPageNo(currPageNo);
37.     //设置分页数据  分页条件查询的数据
38.     pageSupport.setData(animeService.animeListPage(searchAname, searauThor, searCid, pageNo, pageSize));
40.     //响应数据
41.     System.out.println("animesUsePage==》" + JSON.toJSONStringWithDateFormat(pageSupport,"yyyy-MM-dd"));
42.     resp.getWriter().write(JSON.toJSONStringWithDateFormat(pageSupport,"yyyy-MM-dd"));
44. }

复制代码

阿里巴巴的数据转为json的jar包： fastjson-1.2.13.jar
JSON.toJSONString(pageSupport)：将数据转为JSON类型
JSON.toJSONStringWithDateFormat(pageSupport,"yyyy-MM-dd"):将数据转为JSON类型,并指定其中日期的格式；
4.7 Dao 方法

1. //条件查询的数据总量
2. public int animeCount(String aname, String author, String cid);
4. //条件查询后分页 后的数据集合
5. public List<Anime> selectAnimeListPage(String aname, String author, String cid, Integer pageNo, Integer pageSize);
7. //增加分页SQL语句
8. executeSql += " order by a.id desc limit ?,?";
10. paramList.add((pageNo - 1) * pageSize);
11. paramList.add(pageSize);

复制代码

4.7.1 条件查询数据总数

1. //根据条件查询 数据总数
2. @Override
3. public int animeCount(String aname, String author, String cid) {
4.     //查询动漫详情的SQL语句
5.     String executeSql = "select count(1) from animes a where 1=1 ";
7.     //参数集合
8.     List<Object> paramList = new ArrayList<Object>();
10.     //根据不同的查询条件，拼接SQL语句和参数
11.     //条件中有动漫名
12.     if(null != aname && !"".equals(aname)) {
13.         //模糊匹配
14.         executeSql += " and a.name like concat('%',?,'%')";
16.         paramList.add(aname);
17.     }
19.     //条件中有作者
20.     if(null != author && !"".equals(author)) {
21.         //标记关键字 author
22.         String markAuthor = "replace(`author`,'"+author +"',""+author+"") as 'a.author'";
24.         //标记
25.         executeSql  = executeSql.replace("a.author", markAuthor);
27.         //模糊匹配
28.         executeSql += " and a.author like concat('%',?,'%')";
30.         paramList.add(author);
31.     }
33.     //条件中有类型
34.     if(null != cid && !"0".equals(cid)) {
35.         executeSql += " and a.cid = ?";
36.         paramList.add(cid);
37.     }
39.     //定义返回动漫总数
40.     int totalCount = 0;
42.     try {
43.         // 执行查询
44.         this.executeSelect(executeSql, paramList.toArray());
46.         // 解析查询结果
47.         if(rs.next()) {
48.             totalCount = rs.getInt(1);
49.         }
51.     } catch (Exception e) {
52.         e.printStackTrace();
53.     } finally {
54.         //关闭资源
55.         this.releaseResource(conn, pstmt, rs);
56.     }
58.     //返回动漫总数量
59.     return totalCount;
60. }

复制代码

4.7.2 条件分页查询数据

1. //查询  动态添加查询条件，并分页后  的数据集合
2. @Override
3. public List<Anime> selectAnimeListPage(String aname, String author, String cid, Integer pageNo, Integer pageSize) {
4.     //查询动漫详情的SQL语句
5.     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 ";
7.     //动态参数，推荐使用
8.     List<Object> paramList = new ArrayList<Object>();
10.     //根据不同的查询条件，拼接SQL语句和参数
11.     //条件中有动漫名
12.     if(null != aname && !"".equals(aname)) {
13.         //模糊匹配
14.         executeSql += " and a.name like concat('%',?,'%')";
16.         //System.out.println("模糊匹配且标记后的SQL=>"+executeSql);
18.         paramList.add(aname);
19.     }
21.     //条件中有作者
22.     if(null != author && !"".equals(author)) {
23.         //标记关键字 author
24.         String markAuthor = "replace(`author`,'"+author +"',""+author+"") as 'a.author'";
26.         //标记
27.         executeSql  = executeSql.replace("a.author", markAuthor);
29.         //模糊匹配
30.         executeSql += " and a.author like concat('%',?,'%')";
32.         System.out.println("模糊匹配且标记后的SQL=>"+executeSql);
34.         paramList.add(author);
35.     }
37.     //条件中有类型
38.     if(null != cid && !"0".equals(cid)) {
39.         executeSql += " and a.cid = ?";
40.         paramList.add(cid);
41.     }
43.     //增加分页SQL语句
44.     executeSql += " order by a.id desc limit ?,?";
46.     paramList.add((pageNo - 1) * pageSize);
47.     paramList.add(pageSize);
49.     //定义返回动漫列表的数据集合
50.     List<Anime> animes = new ArrayList<Anime>();
52.     try {
53.         // 执行查询
54.         this.executeSelect(executeSql, paramList.toArray());
56.         // 解析查询结果
57.         while(rs.next()){
58.             // 每条数据，创建一个动漫对象，存储数据
59.             Anime anime = new Anime();
60.             anime.setId(rs.getInt(1));
61.             anime.setCid(rs.getInt(2));
63.             //对动漫name结构处理
64.             if(null != aname && !"".equals(aname)) {
65.                 //标记name
66.                 String markname = rs.getString(3).replace(aname, ""+aname+"");
67.                 anime.setName(markname);
68.             }else {
69.                 anime.setName(rs.getString(3));
70.             }
72.             anime.setAuthor(rs.getString(4));
73.             anime.setActor(rs.getString(5));
74.             anime.setProduce(rs.getString(6));
75.             anime.setCreate_date(rs.getDate(7));
76.             anime.setCname(rs.getString(8));
78.             // 将每条动漫数据对象放入集合
79.             animes.add(anime);
80.         }
81.     } catch (Exception e) {
82.         e.printStackTrace();
83.     } finally {
84.         //关闭资源
85.         this.releaseResource(conn, pstmt, rs);
86.     }
88.     //返回动漫集合
89.     return animes;
90. }

复制代码

5、动态修改pageSize

5.1html

tfoot中可以选择的pageSize,currentPageSize，动态改变后，需要填写到form表单中的pageSize;

1. 每页 
3. <select name="currentPageSize" id="currentPageSize">
4. </select>
5.  条 

复制代码

5.2 动态加载pageSize

1. //pageSize 请求获取一个JSONString类型的PageSize对象集合
2. //[{"size":3},{"size":5},{"size":10}]
3. //获取PageSize,动态展示
4. $.getJSON("pageSize",function(data){
5.     //alert(data);
6.     //定位currentPageSize的下拉元素
7.     var $currentPageSize = $("#currentPageSize");
9.     //遍历返回的分类集合json集合数，动态加载分类选项
10.     $(data).each(function(){
11.         //alert(this.size);
12.         $currentPageSize.append("<option value='"+this.size+"' class='currentPageSize' >"+this.size+"</option>");
13.     });
15. });

复制代码

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属性值；

1. //修改pageSize
2. //select标签的change()事件, 切换选项时触发
3. $("#currentPageSize").change(function(){
4.     //获取修改后的 currentPageSize
5.     var currentPageSize = $(this).children('option:selected').val();
6.     //alert(currentPageSize);               
7.     //修改提交表单的pageSize
8.     //$("#pageSize").val(currentPageSize);
9.     //通过document.forms[0].pageSize.value  pageSize 为 input标签的name属性值
10.     document.forms[0].pageSize.value =  currentPageSize;
11.     //修改页面大小后，再主动查询一次动漫数据
12.     showPageAnimeList();
13. });

复制代码

6、单例模式

模式特点懒汉模式类加载时，不会主动创建对象，而是当内存中需要且没有该类的实例时，才会创建(存在线程不安全)双重校验饿汉模式类加载时，直接创建实例对象，放入内存中，需要使用的时候，直接返回，不存在线程不安全6.1 JdbcConfig

数据库配置信息读取类(使用单例模式,保证数据读取配置程序运行过程中,只会读取一次 ）；

1. //数据库配置信息读取类(使用单例模式,保证数据读取配置程序运行过程中,只会读取一次 jdbc.properties)
2. public class JdbcConfig {
3.         //创建 Properties 对象，必须全局，私有()只有内部才可以使用
4.         Properties properties;
5.        
6.         //懒汉:类加载时，不会主动创建对象，而是当内存中没有该类的实例时，才会创建
7.         //静态：下面要提供一个获取实例的静态方法，getInstance
8.         //private static JdbcConfig JdbcConfig;
9.        
10.         //饿汉：类加载时，直接创建实例对象，放入内存中，需要使用的时候，直接返回，不存在线程不安全
11.         private static JdbcConfig JdbcConfig = new JdbcConfig();
12.        
13.        
14.         //私有构造方法，保证处理在当前类中，其他任何地方斗不可以创建实例
15.         private JdbcConfig() {
16.                 try {
17.                         //自动实例化  properties
18.                         properties = new Properties();
19.                        
20.                         // 使用反射机制，读取外部配置文件
21.                         InputStream inputStream = JdbcConfig.class.getClassLoader().getResourceAsStream("jdbc.properties");
22.                        
23.                         // 加载输入流对象，获取配置文件内容
24.                         properties.load(inputStream);
25.                        
26.                         System.out.println("------创建JdbcConfig实例成功-------");
27.                 } catch (Exception e) {
28.                         e.printStackTrace();
29.                 }
30.                 // 创建Properties属性对象
31.         }
32.        
33.        
34.         /*
35.          * 单例模式 ：在程序运行期间，保证当前类的实例只有一个，而且是唯一的一个
36.          * 懒汉
37.          */
38. //        public static JdbcConfig getInstance() {
39. //               
40. //                //判断内存中是否存在JdbcConfig 对象实例，如果不存在就创建实例
41. //                if(null == JdbcConfig) {
42. //                        //懒汉，不是线程安全的，可以使用双重校验检查，实现多线程，确保单例
43. //                        //加同步锁，如果有一个线程获取到同步锁，其他线程等待
44. //                        synchronized (JdbcConfig.class) {
45. //                                //再判断一次，内存是否存在JdbcConfig实例
46. //                                if(null == JdbcConfig) {
47. //                                        //创建一个读取数据库配置实例对象，放入内存，创建对象时就自动读取数据配置信息
48. //                                        JdbcConfig = new JdbcConfig();
49. //                                }
50. //                        }
51. //                }
52. //               
53. //                return JdbcConfig;
54. //        }
55.        
56.         //饿汉
57.         public static JdbcConfig getInstance() {
58.                 return JdbcConfig;
59.         }
60.        
61.         //提供一个公共的读取配置文件的方法
62.         public String getPropertyByKey(String key) {
63.                 return properties.getProperty(key);
64.         }
66. }

复制代码

6.2 改进后的Basedao

其他不变，只是获取配置信息的方式改变了；
直接使用JdbcConfig获取配置信息；

1. public class BaseDao {
2.        
3.         // 数据库操作对象
4.         protected Connection conn = null;
5.         protected PreparedStatement pstmt = null;
6.         protected ResultSet rs = null;
7.        
8.         /**
9.          * 获取数据库连接，返回获取连接成功还是失败
10.          */
11.         public boolean getConnection(){
12.                 try {
13.                        
14.                         //非单例模式，会损耗性能
15. //                        // 创建Properties属性对象
16. //                        Properties properties = new Properties();
17. //                       
18. //                        // 使用反射机制，读取外部配置文件
19. //                        InputStream inputStream = BaseDao.class.getClassLoader().getResourceAsStream("jdbc.properties");
20. //                       
21. //                        // 加载输入流对象，获取配置文件内容
22. //                        properties.load(inputStream);
23. //                       
24. //                        // 读取数据库连接信息
25. //                        String driverClass = properties.getProperty("driverClass");
26. //                        String jdbcUrl = properties.getProperty("jdbcUrl");
27. //                        String user = properties.getProperty("user");
28. //                        String password = properties.getProperty("password");
29.                        
30.                         String driverClass = JdbcConfig.getInstance().getPropertyByKey("driverClass");
31.                         String jdbcUrl =  JdbcConfig.getInstance().getPropertyByKey("jdbcUrl");
32.                         String user =  JdbcConfig.getInstance().getPropertyByKey("user");
33.                         String password =  JdbcConfig.getInstance().getPropertyByKey("password");
34.                        
35.                         // 加载驱动
36.                         Class.forName(driverClass);
37.                        
38.                         // 获取数据库连接对象
39.                         conn = DriverManager.getConnection(jdbcUrl, user, password);
40.                 } catch (Exception e) {
41.                         e.printStackTrace();
42.                         // 获取连接失败
43.                         return false;
44.                 }
45.                
46.                 // 获取连接成功
47.                 return true;
48.         }
49.        
50.         /**
51.          * 增删改的通用方法：只需要提供执行的SQL语句和SQL语句需要的参数，使用预处理对象
52.          */
53.         public int executeUpdate(String executeSql, Object ... params){
54.                
55.                 // 定义SQL语句执行的影响行数
56.                 int row = 0;
57.                
58.                 // 获取数据库连接，如果获取失败，不执行操作
59.                 if(getConnection()){
60.                         // 公共执行增删改的处理代码
61.                         try {
62.                                
63.                                 // 创建预处理操作对象
64.                                 pstmt = conn.prepareStatement(executeSql);
65.                                
66.                                 // 实现动态传参，注意: 传入的预编译SQL的?和传入的参数个数和顺序要一致，即：要保证一一对应
67.                                 for (int i = 0; i < params.length; i++) {
68.                                         pstmt.setObject(i + 1, params[i]);
69.                                 }
70.                                
71.                                 // 执行增删改操作，并获取影响行数
72.                                 row = pstmt.executeUpdate();
73.                                
74.                                 System.out.println("BaseDao增删改的SQL=>"+pstmt);
75.                                
76.                         } catch (Exception e) {
77.                                 e.printStackTrace();
78.                         } finally {
79.                                 releaseResource(conn, pstmt, null);
80.                         }
81.                 }
82.                
83.                 // 返回影响行数
84.                 return row;
85.                
86.         }
87.        
88.         /**
89.          * 查询的通用方法：只需要提供执行的SQL语句和SQL语句需要的参数，使用预处理对象
90.          */
91.         public void executeSelect(String executeSql, Object ... params){
92.                
93.                 // 获取数据库连接，如果获取成功，执行查询，否则不执行
94.                 if(getConnection()){
95.                         // 公共执行查询的处理代码
96.                         try {
97.                                 // 创建预处理操作对象
98.                                 pstmt = conn.prepareStatement(executeSql);
99.                                
100.                                 // 实现动态传参，注意: 传入的预编译SQL的?和传入的参数个数和顺序要一致，即：要保证一一对应
101.                                 for (int i = 0; i < params.length; i++) {
102.                                         pstmt.setObject(i + 1, params[i]);
103.                                 }
104.                                
105.                                 // 执行查询操作，并获取结果集
106.                                 rs = pstmt.executeQuery();
107.                                
108.                                 System.out.println("BaseDao查询的SQL=>"+pstmt);
109.                         } catch (Exception e) {
110.                                 e.printStackTrace();
111.                         } finally {
112.                                 // 不释放资源，因为rs要返回，关闭后，直接外层不可以使用
113.                         }
114.                 }
115.         }
116.        
117.         /**
118.          * 释放数据库操作对象资源
119.          */
120.         public void releaseResource(Connection conn, Statement stmt, ResultSet rs){
121.                 try {
122.                         // 手动释放
123.                         if (null != rs) {
124.                                 rs.close();
125.                         }
126.                        
127.                         if (null != stmt) {
128.                                 stmt.close();
129.                         }
131.                         if (null != conn) {
132.                                 conn.close();
133.                         }
134.                 } catch (Exception e) {
135.                         e.printStackTrace();
136.                 }
137.         }
139. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！