【第52天】jQuery的常用方法，循环语句，结合AJAX实现分页

最新推荐文章于 2021-10-18 13:39:15 发布

來秋

最新推荐文章于 2021-10-18 13:39:15 发布

阅读量609

点赞数

分类专栏：培训日记文章标签： jQuery AJAX 分页

本文链接：https://blog.csdn.net/qq_30257081/article/details/86527929

版权

培训日记专栏收录该内容

49 篇文章 3 订阅

订阅专栏

1 常用方法
2 循环语句及结合AJAX实现分页

1 常用方法

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>常用方法</title>
        <style>
            table{
                width:400px;
                border-collapse: collapse;
            }
            table,tr,td{
                border:solid 2px silver;
            }
            .test1{
                background-color: red;
            }
            .test2{
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div id="outter"><span>测试1</span><span>测试2</span></div>

        <button>添加一行</button>
        <table id="mytb">
            <tr>
                <td>我是默认存在的一行</td>
            </tr>
        </table>
        <span class="test1">我是test1</span>
        <hr>
        <span class="test2">我是test2</span>
        <div id="show"></div>
        <hr>
        <div id="showtb2">
            <table id="mytb2">
                <tr>
                    <td>我是默认存在于mytb2中的一列</td>
                    <td>我是默认存在于mytb2中的一列</td>
                </tr>
            </table>
        </div>

        <div id="showtb3">
            <table id="mytb3">
                <tr>
                    <td>我是默认存在于mytb3中的一列</td>
                    <td>我是默认存在于mytb3中的一列</td>
                </tr>
            </table>
        </div>

        <p>我是一个段落</p>

        <script src="script/jquery-1.10.2.js"></script>
        <script>
            $(function(){
                /*
                 *   1):
                 *       text():拿取元素内部的所有文本，若有多个文本则合并为一个文本
                 *
                 *       html():拿取元素内部的所有超文本标记语言（HTML），包括标签等
                 * */
                console.log("id为outter的text()：" + $("div#outter").text());
                console.log("id为outter的html()：" + $("div#outter").html());

                /*
                 *
                 *   2):
                 *       A.append(B)
                 *           效果是AB
                 *           A为父元素，B被设置为追加到A中的子元素，原先在其中的元素被保留
                 *
                 *       A.appendTo(B)
                 *           效果是BA
                 *           B为父元素，A被设置为追加到B中的子元素，原先在其中的元素被保留
                 * */
                $("button:contains(添加一行)").click(function(){
                   $("<tr><td>我是添加的一行</td></tr>").appendTo($("table#mytb"));
                });
                /*
                  相当于
                    $("button:contains(添加一行)").click(function(){
                        $("table#mytb").append($("<tr><td>我是添加的一行</td></tr>"));
                    });
                 */

                /*
                 *   3):
                 *       A.after(B)
                 *           效果是AB
                 *           设置为两者互为兄弟并且紧邻
                 *
                 *       A.before(B)
                 *           效果是BA
                 *           同上
                 * */
                $("span.test2").after($("span.test1"));
                /*相当于
                  $("span.test1").before($("span.test2"));
                */

                /*
                 *   4):
                 *       clone()
                 *       复制一个元素，这个元素的结构样式动作都会被复制
                 * */
                $("div#show").html($("table#mytb").clone());

                /*
                 *   5):
                 *       empty()删除被选择的元素中的子元素及其内容，但选择的元素保留
                 *
                 *       remove()删除被选择的元素及其所有子内容
                 *
                 * */
                $("table#mytb2").remove();
                console.log("remove()后的mytb2：" + $("div#showtb2").html());

                $("table#mytb3").empty();
                console.log("empty()后的mytb3：" + $("div#showtb3").html());

                /*
                 *   6):
                 *       A.replaceWith(B)
                 *       A被B取代
                 *
                 *
                 *       A.replaceAll(B)
                 *       B被A取代
                 * */
                $("p:contains(我是一个段落)").replaceWith($("<div>我是取代段落的div</div>"));
                /*相当于
                  $("<div>我是取代段落的div</div>").replaceAll($("p:contains(我是一个段落)"));
                */
            });
        </script>
    </body>
</html>

效果图：在这里插入图片描述

2 循环语句及结合AJAX实现分页

page.html

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>循环和分页</title>
        <style>
            table{
                width:600px;
                border-collapse: collapse;
            }
            table,tr,td{
                border:solid 2px silver;
            }
        </style>
    </head>
    <body>

        <!--放置表格-->
        <div id="show"></div>

        <!--放置分页数据信息-->
        <label id="msg"></label>
        <br>

        <button id="first" disabled>首页</button>
        <button id="pre" disabled>上一页</button>
        <button id="next" disabled>下一页</button>
        <button id="end" disabled>末页</button>

        <script src="script/jquery-1.10.2.js"></script>
        <script>

            //全局定义与分页有关的四个参数

            //总记录数（后台获取）
            let totalRecord;

            //每页记录（前端获取）
            let pageRecord = 5;

            //总页数（后台获取）
            let totalPage;

            //当前页（前端获取）
            let currentPage = 1;

            //ready函数中存放激发事件，当页面结构加载完毕，自动执行这个函数
            $(function(){
               queryNews();
            });

            //异步查询显示数据
            function queryNews(){
                $.ajax({
                    url: "queryNews",
                    type: "post",
                    async: true,
                    dataType: "json",
                    //请求中包括当前页和每页记录数
                    data: "currentPage=" + currentPage + "&pageRecord=" + pageRecord,
                    success: function(data){
                       //获取后台传回的总记录数
                        totalRecord = data.totalRecord;
                        //获取后台传回的总页数
                        totalPage = data.totalPage;
                        //获取查询的分页数据
                        //[{"author":"懂球帝","id":1,"title":"中国队战胜韩国队即可小组第一出线"},{"author":"小米科技","id":2,"title":"红米品牌发布"},{"author":"新浪","id":3,"title":"距离锤子发布会还有2天"},{"author":"Jetbrain","id":4,"title":"2018年语言排行榜Java夺冠"},{"author":"腾讯网","id":5,"title":"王思聪嚼口香糖给奥运冠军颁奖"}]
                        let array = data.list;
                        //将获取到的数据绘入表格中,首先绘制表头
                        let table = "<table><tr><th>ID</th><th>标题</th><th>作者</th></tr>"
                        /*
                         *   类似于Java中的foreach
                         *   $.each(循环体,function(索引值,每个被遍历的对象){
                         *
                         *   });
                         * */
                        //再绘制表体
                        $.each(array, function(index, news){
                           table += "<tr><td>" + news.id + "</td><td>" + news.title + "</td><td>" + news.author + "</td></tr>";
                        });

                        //表格结尾
                        table += "</table>";

                        //将绘制好的表格放入div
                        $("div#show").html(table);

                        $("label#msg").text("当前是第" + currentPage + "页，共" + totalPage + "页，共" + totalRecord + "条数据");

                        //当获取到数据，激活按钮动作
                        if(totalPage > 1){
                            //解除之前绑定在button按钮上所有的所有激发事件，并将所有的按钮都恢复为不可点击
                            $("button").unbind().attr("disabled", "true");

                            //根据当前页码给相应按钮设置动作和样式
                            //若当前页码为1，只有下一页和末页有效
                            if(currentPage == 1){
                                $("#next, #end").click(function(){
                                    changeCurrentPageById($(this).attr("id"));
                                }).attr("disabled", false);
                            }
                            //当前页码为最后一页，只有首页和上一页有效
                            else if(currentPage == totalPage){
                                $("#first, #pre").click(function(){
                                   changeCurrentPageById($(this).attr("id"));
                                }).attr("disabled", false);
                            }
                            //其他页所有按钮都有效
                            else{
                                $("button").click(function(){
                                   changeCurrentPageById($(this).attr("id"));
                                }).attr("disabled", false);
                            }
                        }
                    },
                    error: function(err){
                        console.log(err);
                    }
                });
            }

            //根据id值的不同，更改当前页
            function changeCurrentPageById(id){
                if(id == "first") {
                    currentPage = 1;
                }else if(id == "pre"){
                    currentPage--;
                }else if(id == "next"){
                    currentPage++;
                }else if(id == "end"){
                    currentPage = totalPage;
                }
                queryNews();
            }
        </script>
    </body>
</html>

servlet/QueryNews.java

package com.test.servlet;

import com.test.dao.NewsDaoIf;
import com.test.dao.NewsDaoImpl;
import com.test.po.News;
import net.sf.json.JSONObject;

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.io.PrintWriter;
import java.util.List;

public class QueryNews extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/plain;charset=utf-8");

        //获取前端发来的当前页
        Integer currentPage = Integer.parseInt(request.getParameter("currentPage"));

        //获取前端发来的每页记录数
        Integer pageRecord = Integer.parseInt(request.getParameter("pageRecord"));

        //调用dao层
        NewsDaoIf dao = new NewsDaoImpl();

        //获取总记录数
        Integer totalRecord = dao.getCount();

        //获取总页数
        Integer totalPage = (totalRecord + pageRecord - 1) / pageRecord;

        //获取分页的数据
        List<News> list = dao.getPage((currentPage - 1) * pageRecord, pageRecord);

        //将查询到的数据、从后台获取到的总记录数和计算出的总页数返回前台
        JSONObject jo = new JSONObject();
        jo.put("list", list);
        jo.put("totalRecord", totalRecord);
        jo.put("totalPage", totalPage);

        System.out.println(jo);

        PrintWriter out = response.getWriter();
        out.print(jo);
        out.flush();
        out.close();

    }
}