AJAX&搜索联想&两种分页方式

最新推荐文章于 2024-09-15 09:47:04 发布
最新推荐文章于 2024-09-15 09:47:04 发布
阅读量135 收藏
点赞数
文章标签： ajax js java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xm_hello/article/details/106994638
版权

AJAX 快速入门

AJAX 介绍

  • AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。  本身不是一种新技术，而是多个技术综合。用于快速创建动态网页的技术。
  • 一般的网页如果需要更新内容，必需重新加载个页面。
  • 而 AJAX 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部分内容进行局部更新。
    在这里插入图片描述
  • 什么是同步
    在这里插入图片描述
  • 什么是异步
    在这里插入图片描述

原生 JavaScript 实现 AJAX

  • 核心对象：XMLHttpRequest
    用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
  • 打开链接：open(method,url,async)
    method：请求的类型 GET 或 POST。
    url：请求资源的路径。
    async：true(异步) 或 false(同步)。
  • 发送请求：send(String params)
    params：请求的参数(POST 专用)。
  • 处理响应：onreadystatechange
    readyState：0-请求未初始化，1-服务器连接已建立，2-请求已接收，3-请求处理中，4-请求已完成，且响应已就绪。
    status：200-响应已全部 OK。
  • 获得响应数据形式
    responseText：获得字符串形式的响应数据。
    responseXML：获得 XML 形式的响应数据。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <form autocomplete="off">
        姓名：<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密码：<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    </form>
</body>
<script>
    //1.为姓名绑定失去焦点事件
    document.getElementById("username").onblur = function() {
        //2.创建XMLHttpRequest核心对象
        let xmlHttp = new XMLHttpRequest();

        //3.打开链接
        let username = document.getElementById("username").value;
        xmlHttp.open("GET","userServlet?username="+username,true);
        //xmlHttp.open("GET","userServlet?username="+username,false);

        //4.发送请求
        xmlHttp.send();

        //5.处理响应
        xmlHttp.onreadystatechange = function() {
            //判断请求和响应是否成功
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                //将响应的数据显示到span标签
                document.getElementById("uSpan").innerHTML = xmlHttp.responseText;
            }
        }
    }
</script>
</html>

jQuery 的 GET 方式实现 AJAX

  • 核心语法：$.get(url,[data],[callback],[type]);
    url：请求的资源路径。
    data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。
    callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。
    type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <form autocomplete="off">
        姓名：<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密码：<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    </form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.为用户名绑定失去焦点事件
    $("#username").blur(function () {
        let username = $("#username").val();
        $.get(
          "userServlet",
          "username="+  username,
            function (data) {
                $("#uSpan").html(data);
            },
            "text"
        );
    })
</script>
</html>

jQuery 的 POST 方式实现 AJAX

  • 核心语法：$.post(url,[data],[callback],[type]);
    url：请求的资源路径。
    data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。
    callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。
    type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <form autocomplete="off">
        姓名：<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密码：<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    </form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.为用户名绑定失去焦点事件
    $("#username").blur(function () {
        let username = $("#username").val();
        //2.jQuery的POST方式实现AJAX
        $.post(
            //请求的资源路径
            "userServlet",
            //请求参数
            "username=" + username,
            //回调函数
            function (data) {
                //将响应的数据显示到span标签
                $("#uSpan").html(data);
            },
            //响应数据形式
            "text"
        );
    });
</script>
</html>

jQuery 的通用方式实现 AJAX

  • 核心语法：$.ajax({name:value,name:value,…});
    url：请求的资源路径。
    async：是否异步请求，true-是，false-否 (默认是 true)。
    data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。
    type：请求方式，POST 或 GET (默认是 GET)。
    dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
    success：请求成功时调用的回调函数。
    error：请求失败时调用的回调函数。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <form autocomplete="off">
        姓名：<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密码：<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    </form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.为用户名绑定失去焦点事件
    $("#username").blur(function () {
        let username = $("#username").val();
        //2.jQuery的通用方式实现AJAX
        $.ajax({
            //请求资源路径
            url:"userServletxxx",
            //是否异步
            async:true,
            //请求参数
            data:"username="+username,
            //请求方式
            type:"POST",
            //数据形式
            dataType:"text",
            //请求成功后调用的回调函数
            success:function (data) {
                //将响应的数据显示到span标签
                $("#uSpan").html(data);
            },
            //请求失败后调用的回调函数
            error:function () {
                alert("操作失败...");
            }
        });
    });
</script>
</html>

AJAX 快速入门小结

  • AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。
  • 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部
    分内容进行局部更新。
  • 同步和异步
    同步：服务器端在处理过程中，无法进行其他操作。
    异步：服务器端在处理过程中，可以进行其他操作。
  • GET 方式实现：$.get();
  • POST 方式实现：$.post();
    url：请求的资源路径。
    data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。
    callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。
    type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
  • 通用方式实现：$.ajax();
    url：请求的资源路径。
    async：是否异步请求，true-是，false-否 (默认是 true)。
    data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。
    type：请求方式，POST 或 GET (默认是 GET)。
    dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
    success：请求成功时调用的回调函数。
    error：请求失败时调用的回调函数。

JSON 的处理

JSON 回顾

  • JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。
  • 它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
  • 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和生成，并有效的
    提升网络传输效率。
    在这里插入图片描述
  • 创建格式
    在这里插入图片描述
  • 常用方法
    在这里插入图片描述

JSON 转换工具

  • 我们除了可以在 JavaScript 中来使用 JSON 以外，在 JAVA 中同样也可以使用 JSON。  JSON 的转换工具是通过 JAVA 封装好的一些 JAR 工具包。
  • 可以将 JAVA 对象或集合转换成 JSON 格式的字符串，也可以将 JSON 格式的字符串转成 JAVA 对象。
  • Jackson：开源免费的 JSON 转换工具，SpringMVC 转换默认使用 Jackson。
  1. 导入 jar 包。
    在这里插入图片描述
  2. 创建核心对象。
  3. 调用方法完成转换。
  • 常用类
    在这里插入图片描述
  • ObjectMapper 常用方法
    在这里插入图片描述
package com.itheima02;

import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;

import java.util.ArrayList;
import java.util.HashMap;

/*
    JSON转换工具的使用
 */
public class ObjectMapperTest {
    private ObjectMapper mapper = new ObjectMapper();

    /*
        1.User对象转json, json转User对象
          json字符串 = {"name":"张三","age":23}
          user对象 = User{name='张三', age=23}
     */
    @Test
    public void test01() throws Exception {
        //User对象转json
        User user = new User("张三", 23);
        String json = mapper.writeValueAsString(user);
        System.out.println("json字符串：" + json);

        //json转User对象
        User user2 = mapper.readValue(json, User.class);
        System.out.println("java对象：" + user2);
    }

    /*
         2.map<String,String>转json, json转map<String,String>
          json字符串 = {"姓名":"张三","性别":"男"}
          map对象 = {姓名=张三, 性别=男}
     */
    @Test
    public void test02() throws Exception {
        //map<String,String>转json
        HashMap<String, String> map = new HashMap<>();
        map.put("姓名", "张三");
        map.put("性别", "男");
        String json = mapper.writeValueAsString(map);
        System.out.println("json字符串：" + json);

        //json转map<String,String>
        HashMap<String, String> map2 = mapper.readValue(json, HashMap.class);
        System.out.println("java对象：" + map2);
    }

    /*
        3.map<String,User>转json, json转map<String,User>
          json字符串 = {"黑马一班":{"name":"张三","age":23},"黑马二班":{"name":"李四","age":24}}
          map对象 = {黑马一班=User{name='张三', age=23}, 黑马二班=User{name='李四', age=24}}
     */
    @Test
    public void test03() throws Exception {
        //map<String,User>转json
        HashMap<String, User> map = new HashMap<>();
        map.put("黑马一班", new User("张三", 23));
        map.put("黑马二班", new User("李四", 24));
        String json = mapper.writeValueAsString(map);
        System.out.println("json字符串：" + json);

        //json转map<String,User>
        HashMap<String, User> map2 = mapper.readValue(json, new TypeReference<HashMap<String, User>>() {
        });
        System.out.println("java对象：" + map2);
    }

    /*
        4.List<String>转json, json转 List<String>
          json字符串 = ["张三","李四"]
          list对象 = [张三, 李四]
     */
    @Test
    public void test04() throws Exception {
        //List<String>转json
        ArrayList<String> list = new ArrayList<>();
        list.add("张三");
        list.add("李四");
        String json = mapper.writeValueAsString(list);
        System.out.println("json字符串：" + json);

        //json转 List<String>
        ArrayList<String> list2 = mapper.readValue(json,ArrayList.class);
        System.out.println("java对象：" + list2);
    }

    /*
        5.List<User>转json, json转List<User>
          json字符串 = [{"name":"张三","age":23},{"name":"李四","age":24}]
          list对象 = [User{name='张三', age=23}, User{name='李四', age=24}]
     */



        @Test
        public void test05 () throws Exception {
            //List<User>转json
        ArrayList<User> list = new ArrayList<>();
        list.add(new User("张三",23));
        list.add(new User("李四",24));
        String json = mapper.writeValueAsString(list);
        System.out.println("json字符串：" + json);

        //json转List<User>
        ArrayList<User> list2 = mapper.readValue(json,new TypeReference<ArrayList<User>>(){});
        System.out.println("java对象：" + list2);

        }
    }

JSON 的处理小结

  • Jackson：开源免费的 JSON 转换工具，SpringMVC 转换默认使用 Jackson。
  • 可以将 JAVA 对象或集合转换成 JSON 格式的字符串，也可以将 JSON 格式的字符串转成 JAVA 对象。
  • 常用类
    在这里插入图片描述
  • ObjectMapper 常用方法
    在这里插入图片描述

综合案例 搜索联想

案例分析和实现

  • 页面
  1. 为用户名输入框绑定鼠标点击事件。
  2. 获取输入的用户名数据。
  3. 判断用户名是否为空。
  4. 如果为空，则将联想提示框隐藏。
  5. 如果不为空，则发送 AJAX 请求，并将响应的数据显示到联想框。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户搜索</title>
    <style type="text/css">
        .content {
            width: 643px;
            margin: 100px auto;
            text-align: center;
        }

        input[type='text'] {
            width: 530px;
            height: 40px;
            font-size: 14px;
        }

        input[type='button'] {
            width: 100px;
            height: 46px;
            background: #38f;
            border: 0;
            color: #fff;
            font-size: 15px
        }

        .show {
            position: absolute;
            width: 535px;
            height: 100px;
            border: 1px solid #999;
            border-top: 0;
            display: none;
        }
    </style>
</head>
<body>
<form autocomplete="off">
    <div class="content">
        <img src="img/logo.jpg">
        <br/><br/>
        <input type="text" id="username">
        <input type="button" value="搜索一下">
        <!--用于显示联想的数据-->
        <div id="show" class="show"></div>
    </div>
</form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.为用户名输入框绑定鼠标点击事件
     $("#username").mousedown(function () {
         //2.获取输入的用户名
         let username = $("#username").val();

         //3.判断用户名是否为空
         if(username == null || username == "") {
             //4.如果为空，将联想框隐藏
             $("#show").hide();
             return;
         }

         //5.如果不为空，发送AJAX请求。并将数据显示到联想框
         $.ajax({
             //请求的资源路径
             url:"userServlet",
             //请求参数
             data:{"username":username},
             //请求方式
             type:"POST",
             //响应数据形式
             dataType:"json",
             //请求成功后的回调函数
             success:function (data) {
                 //将返回的数据显示到show的div
                 let names = "";
                 for(let i = 0; i < data.length; i++) {
                     names += "<div>"+data[i].name+"</div>";
                 }
                 $("#show").html(names);
                 $("#show").show();
             }
         });
     });
</script>
</html>
  • 控制层
  1. 获取请求参数。
  2. 调用业务层的模糊查询方法。
  3. 将返回的数据转成 JSON，并响应给客户端。
package com.itheima.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.itheima.bean.User;
import com.itheima.service.UserService;
import com.itheima.service.impl.UserServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置请求和响应的编码
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        //1.获取请求参数
        String username = req.getParameter("username");

        //2.调用业务层的模糊查询方法得到数据
        UserService service = new UserServiceImpl();
        List<User> users = service.selectLike(username);

        //3.将数据转成JSON，响应到客户端
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(users);
        resp.getWriter().write(json);
    }

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

综合案例 分页

瀑布流无限加载数据分页

案例的分析

  • 如何确定当前显示的数据已经浏览完毕？
    公式：(滚动条距底部的距离 + 滚动条上下滚动的距离 + 当前窗口的高度) >= 当前文档的高度
    当前文档高度：存储10条数据，100px。
    滚动条距底部的距离：1px。
    当前窗口的高度：80px。
    滚动条上下滚动的距离：>=19px。
  • 前置知识
    在这里插入图片描述

案例的实现

  • 页面
  1. 定义发送请求标记。
  2. 定义当前页码和每页显示的条数。
  3. 定义滚动条距底部的距离。
  4. 设置页面加载事件。
  5. 为当前窗口绑定滚动条滚动事件。
  6. 获取必要信息(当前窗口的高度,滚动条上下滚动的距离,当前文档的高度)。
  7. 计算当前展示数据是否浏览完毕。
  8. 判断请求标记是否为 true。
  9. 将请求标记置为 false，当前异步操作完成前，不能重新发起请求。
  10. 根据当前页和每页显示的条数来请求查询分页数据。
  11. 当前页码+1。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站首页</title>
    <link rel="stylesheet" href="css/tt.css">
</head>
<body>
<div class="top">
    <span class="top-left">下载APP</span>
    <span class="top-left"> 北京         晴天</span>
    <span class="top-right">更多产品</span>
</div>

<div class="container">

    <div class="left">
        <a>
            <img src="img/logo.png"><br/>
        </a>

        <ul>
            <li>
                <a class="channel-item active" href="#">
                    <span>
                        推荐
                    </span>
                </a>
            </li>

            <li><a class="channel-item" href="#">
                <span>
                    视频
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    热点
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    直播
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    图片
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    娱乐
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    游戏
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    体育
                </span>
            </a></li>

        </ul>

    </div>
    <div class="center">
        <ul class="news_list">
            <li>
                <div class="title-box">
                    <a href="#" class="link">
                        奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实11”
                        <hr>
                    </a>
                </div>
            </li>
            <li>
                <div class="title-box">
                    <a href="#" class="link">
                        奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实22”
                        <hr>
                    </a>
                </div>
            </li>
            <li>
                <div class="title-box">
                    <a href="#" class="link">
                        奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实33”
                        <hr>
                    </a>
                </div>
            </li>
            <li>
                <div class="title-box">
                    <a href="#" class="link">
                        奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实44”
                        <hr>
                    </a>
                </div>
            </li>
            <li>
                <div class="title-box">
                    <a href="#" class="link">
                        奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实55”
                        <hr>
                    </a>
                </div>
            </li>
            <li>
                <div class="title-box">
                    <a href="#" class="link">
                        奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实66”
                        <hr>
                    </a>
                </div>
            </li>
            <li>
                <div class="title-box">
                    <a href="#" class="link">
                        奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实77”
                        <hr>
                    </a>
                </div>
            </li>
            <li>
                <div class="title-box">
                    <a href="#" class="link">
                        奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实88”
                        <hr>
                    </a>
                </div>
            </li>
            <li>
                <div class="title-box">
                    <a href="#" class="link">
                        奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实99”
                        <hr>
                    </a>
                </div>
            </li>
            <li>
                <div class="title-box">
                    <a href="#" class="link">
                        奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实1010”
                        <hr>
                    </a>
                </div>
            </li>
        </ul>

        <div class="loading" style="text-align: center; height: 80px">
            <img src="img/loading2.gif" height="100%">
        </div>

        <div class="content">
            <div class="pagination-holder clearfix">
                <div id="light-pagination" class="pagination"></div>
            </div>
        </div>

        <div id="no" style="text-align: center;color: red;font-size: 20px"></div>
    </div>
</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
      //1.定义发送请求标记
      let send = true;

      //2.定义当前页码和每页显示的条数
      let start = 1;
      let pageSize = 10;

      //3.定义滚动条距底部的距离
      let bottom = 50;

      //4.设置页面加载事件
      $(function () {
          //5.为当前窗口绑定滚动条滚动事件
          $(window).scroll(function () {
              //6.获取必要信息，用于计算当前展示数据是否浏览完毕
              //当前窗口的高度
              let windowHeight = $(window).height();

              //滚动条从上到下滚动距离
              let scrollTop = $(window).scrollTop();

              //当前文档的高度
              let docHeight = $(document).height();

              //7.计算当前展示数据是否浏览完毕
              //当 滚动条距底部的距离 + 当前滚动条滚动的距离 + 当前窗口的高度 >= 当前文档的高度
              if((bottom + scrollTop + windowHeight) >= docHeight) {
                  //8.判断请求标记是否为true
                  if(send == true) {
                      //9.将请求标记置为false，当前异步操作完成前，不能重新发起请求。
                      send = false;
                      //10.根据当前页和每页显示的条数来 请求查询分页数据
                      queryByPage(start,pageSize);
                      //11.当前页码+1
                      start++;
                  }
              }
          });
      });

      //定义查询分页数据的函数
      function queryByPage(start,pageSize){
          //加载动图显示
          $(".loading").show();
          //发起AJAX请求
          $.ajax({
              //请求的资源路径
              url:"newsServlet",
              //请求的参数
              data:{"start":start,"pageSize":pageSize},
              //请求的方式
              type:"POST",
              //响应数据形式
              dataType:"json",
              //请求成功后的回调函数
              success:function (data) {
                  if(data.length == 0) {
                      $(".loading").hide();
                      $("#no").html("我也是有底线的...");
                      return;
                  }
                  //加载动图隐藏
                  $(".loading").hide();
                  //将数据显示
                  let titles = "";
                  for(let i = 0; i < data.length; i++) {
                      titles += "<li>\n" +
                          "                <div class=\"title-box\">\n" +
                          "                    <a href=\"#\" class=\"link\">\n" +
                                                      data[i].title +
                          "                        <hr>\n" +
                          "                    </a>\n" +
                          "                </div>\n" +
                          "            </li>";
                  }

                  //显示到页面
                  $(".news_list").append(titles);
                  //将请求标记设置为true
                  send = true;
              }
          });
      }
    

</script>
</html>
  • 服务器
  1. 获取请求参数(当前页,每页显示的条数)。
  2. 根据当前页码和每页显示的条数，调用业务层的方法，得到分页 Page 对象。
  3. 将得到的数据转为 json。
  4. 将数据响应给客户端。
package com.itheima.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.github.pagehelper.Page;
import com.itheima.service.NewsService;
import com.itheima.service.impl.NewsServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/newsServlet")
public class NewsServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置请求和响应的编码
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        //1.获取请求参数
        String start = req.getParameter("start");
        String pageSize = req.getParameter("pageSize");

        //2.根据当前页码和每页显示的条数来调用业务层的查询方法，得到分页Page对象
        NewsService service = new NewsServiceImpl();
        Page page = service.pageQuery(Integer.parseInt(start), Integer.parseInt(pageSize));

        //3.将得到的数据转为JSON
        String json = new ObjectMapper().writeValueAsString(page);

        try {
            Thread.sleep(1000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }

        //4.将数据响应给客户端
        resp.getWriter().write(json);
    }

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

点击按钮分页

案例的分析实现

  • 页面
  1. 引入分页插件的样式文件和 js 文件。
  2. 定义当前页码和每页显示的条数。
  3. 调用查询数据的函数。
  4. 定义请求查询分页数据的函数，发起 AJAX 异步请求。
  5. 为分页按钮区域设置页数参数(总页数和当前页)。
  6. 为分页按钮绑定单击事件,完成上一页下一页查询功能。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站首页</title>
    <link rel="stylesheet" href="css/tt.css">
    <link rel="stylesheet" href="css/simplePagination.css">
</head>
<body>
<div class="top">
    <span class="top-left">下载APP</span>
    <span class="top-left"> 北京         晴天</span>
    <span class="top-right">更多产品</span>
</div>

<div class="container">

    <div class="left">
        <a>
            <img src="img/logo.png"><br/>
        </a>

        <ul>
            <li>
                <a class="channel-item active" href="#">
                    <span>
                        推荐
                    </span>
                </a>
            </li>

            <li><a class="channel-item" href="#">
                <span>
                    视频
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    热点
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    直播
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    图片
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    娱乐
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    游戏
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    体育
                </span>
            </a></li>
        </ul>

    </div>
    <div class="center">
        <ul class="news_list">

        </ul>

        <div class="content">
            <div class="pagination-holder clearfix">
                <div id="light-pagination" class="pagination"></div>
            </div>
        </div>

    </div>
</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.simplePagination.js"></script>
<script>
        //1.定义当前页码和每页显示的条数
        let start = 1;
        let pageSize = 10;

        //2.调用查询数据的方法
        queryByPage(start,pageSize);

        //3.定义请求查询分页数据的函数，发起AJAX异步请求，将数据显示到页面
        function queryByPage(start,pageSize) {
            $.ajax({
                //请求的资源路径
                url:"newsServlet2",
                //请求的参数
                data:{"start":start,"pageSize":pageSize},
                //请求的方式
                type:"POST",
                //响应数据形式
                dataType:"json",
                //请求成功后的回调函数
                success:function (pageInfo) {
                    //将数据显示到页面
                    let titles = "";
                    for(let i = 0; i < pageInfo.list.length; i++) {
                        titles += "<li>\n" +
                            "                <div class=\"title-box\">\n" +
                            "                    <a href=\"#\" class=\"link\">\n" +
                                                    pageInfo.list[i].title +
                            "                        <hr>\n" +
                            "                    </a>\n" +
                            "                </div>\n" +
                            "            </li>";
                    }
                    $(".news_list").html(titles);

                    //4.为分页按钮区域设置页数参数（总页数和当前页）
                    $("#light-pagination").pagination({
                        pages:pageInfo.pages,
                        currentPage:pageInfo.pageNum
                    });

                    //5.为分页按钮绑定单击事件,完成上一页下一页查询功能
                    $("#light-pagination .page-link").click(function () {
                        //获取点击按钮的文本内容
                        let page = $(this).html();
                        //如果点击的是Prev，调用查询方法，查询当前页的上一页数据
                        if(page == "Prev") {
                            queryByPage(pageInfo.pageNum - 1,pageSize);
                        }else if (page == "Next") {
                            //如果点击的是Next，调用查询方法，查询当前页的下一页数据
                            queryByPage(pageInfo.pageNum + 1,pageSize);
                        } else {
                            //调用查询方法，查询当前页的数据
                            queryByPage(page,pageSize);
                        }
                    });
                }
            });
        }
</script>
</html>
  • 服务器
  1. 获取请求参数。
  2. 根据当前页码和每页显示的条数，调用业务层的方法，得到分页 Page 对象。
  3. 封装 PageInfo 对象。
  4. 将得到的数据转为 json。
  5. 将数据响应给客户端。
package com.itheima.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageInfo;
import com.itheima.bean.News;
import com.itheima.service.NewsService;
import com.itheima.service.impl.NewsServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

@WebServlet("/newsServlet2")
public class NewsServlet2 extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置请求和响应的编码
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        //1.获取请求参数
        String start = req.getParameter("start");
        String pageSize = req.getParameter("pageSize");

        //2.根据当前页码和每页显示的条数来调用业务层的查询方法，得到分页Page对象
        NewsService service = new NewsServiceImpl();
        Page page = service.pageQuery(Integer.parseInt(start), Integer.parseInt(pageSize));

        //3.封装PageInfo对象
        PageInfo<List<News>> info = new PageInfo<>(page);

        //4.将得到的数据转为JSON
        String json = new ObjectMapper().writeValueAsString(info);

        //5.将数据响应给客户端
        resp.getWriter().write(json);

    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }
}
xm_hello
关注
Ajax,json,Vue,Element(javaweb基础)
weixin_46341513的博客
07-13 101
Ajax,json,Vue,Element(javaweb基础)
python网络爬虫（web spider）系统化整理总结（二）：爬虫python代码示例(两种响应格式：json和html)
the blog of alunSemiconductor
10-13 1070
        上一篇博客（入门知识篇），对爬虫有了一个基本的了解，但是具体怎么实现一个爬虫程序呢？         一般情况下，我们在浏览器获取信息，是向服务器发送一个http请求，要么返回html页面，要么是ajax请求返回一串json数据，以更新当前网页中局部信息。这里用两个例子分别学习下爬虫的基本操作。          以下代码是基于python3.6环境。 一、百度在线翻译的自动...
数据前台分页
weixin_30511107的博客
10-21 130
完整代码 <template> <div style="height:1000px;"> <el-table :data="datalist" style="width: 100%"> <el-table-column label="年龄" width="180"> <template slot-scope="scope"...
殷-ajax&json
weixin_45156610的博客
07-13 294
typora-copy-images-to: img AJAX与JSON 学习目标 能够理解异步的概念 能够了解原生js的ajax 能够使用jQuery的$.get()进行访问 能够使用jQuery的$.post()进行访问 能够使用jQuery的$.ajax()进行访问 能够使用jQuery3.0的$.get()新增签名进行访问 能够使用jQuery3.0的$.post()新增签名进行访问 ...
Java Web学习day23------AJAX（入门、json处理、搜索联想案例、分页案例）
dsh789的博客
12-18 229
ajax1、Ajax快速入门1.1、AJAX介绍1.2、原生JS实现AJAX1.3、原生JS实现AJAX详解1.4、JQuery的GET方式实现AJAX总结与注意事项1.5、JQuery的POST方式实现AJAX1.6、JQuery的通用方式实现AJAX1.7、小结2、JSON的处理2.1、JSON回顾2.2、JSON转换工具的介绍2.3、JSON转换练习2.4、小结3、综合案例 搜索联想总结以及注意事项总结--代码思路1.获取参数2.验证参数3.ajax请求(重点)注意事项4、综合案例 分页4.1、案例效
WebDay06 json&ajax,网络编程回顾,idea常用快捷键 搜索案例 分页案例
m0_46690280的博客
05-28 453
JSON&AJAX一 JSON1.1 JSON概述1.2 JSON基础语法1.3 JSON格式转换二 AJAX2.1 AJAX概述2.2 JS原生AJAX【了解,开发中不用....】2.3 JQuery的Ajax插件【会用】2.3.1 get/post 函数(要背下来)2.3.2 ajax函数(看得懂,会抄)2.4 同步和异步概述三 搜索案例四 网络编程(回顾)五 idea常用快捷键 一 JSON 1.1 JSON概述 JavaScript对象表示形式（JavaScript Object Notat
数据展示技巧: 使用Ajax动态更新页面内容
Ajax（Asynchronous JavaScript and XML）即异步JavaScript和XML，是一种用于创建快速动态网页的技术。它通过在后台与服务器进行少量数据交换，实现页面内容的局部更新，而不需要重新加载整个页面。Ajax的核心是使用...
前端速成教程（HTML、CSS、JS、Vue…）
www.h y p e r p l a s m a.top
05-06 2371
JavaWeb开发 SSM框架基础 前端速成——HTML、CSS、JS、Vue、Ajax、前端工程化。Web技术教程：W3Schoo。Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。Vue-cli是Vue官方提供的一个脚手架，用于快速生成Vue项目模板。
实现实时Web应用，使用AJAX轮询、WebSocket、还是SSE呢？？
Hassan的小博客!
09-12 986
文章目录短轮询（Short Polling）长轮询（Long Polling）Comet “服务器推” （这玩意现在用的很少了，了解一下即可）WebSocket原理：方法：事件：SSE原理事件总结 在日常的开发中，我们经常能碰见服务端需要主动推送给客户端数据的业务场景，比如数据大屏的实时数据、新闻数据、消息中心的未读消息，聊天功能、股票走势、天气情况等等。 我们的方案大概就是轮询、WebSocket、SSE 短轮询（Short Polling） 客户端定期（例如每几秒）发送AJAX请求到服务器。服务器立
AJAX 入门 day1
2301_77358195的博客
09-15 822
1.AJAX 概念和 axios 使用“Ajax” 是 “Asynchronous(异步) JavaScript and XML” 的缩写，是一种用于创建动态网页的技术。它允许网页在不重新加载整个页面的情况下与服务器进行交互和更新内容，从而提高用户体验和页面的响应速度。怎么用 AJAX？1.先使用axios[æk‘sioʊs]库，与服务器进行数据通信基于 XMLHttpRequest 封装、代码简单、月下载量在 14 亿次Vue、React 项目中都会用到 axios2.
Java-网络
2301_81543552的博客
09-14 753
Java中的网络编程主要涉及使用Socket类进行网络通信，以及理解各种网络协议。以下是一些关键概念和示例代码，帮助您入门。
自动生成不重复的订单id
ClaireCheney的博客
09-13 326
【代码】自动生成不重复的订单id。
Gradle
最新发布
xiaocaij_icai的博客
09-15 228
");
面试题篇: 跨域问题如何处理(Java和Nginx处理方式)
m0_66572126的博客
09-14 730
最常见的解决方案是在服务器端配置 CORS 头。服务器需要在响应中添加适当的 Access-Control-Allow-头来允许跨域请求。
笔记：Centos Jdk Nginx 安装包安装命令
贰十六的博客
09-12 675
进入到usr中的src，把刚才下载的安装包拉进去。# ./configure 报错。# 将下面填写到配置最下方。# JDK 解压版 配置。# 进入环境变量配置。
Java wrapperr打包springboot项目到linux和Windows
欢迎查阅
09-14 1085
测试启动就是点击App.bat 就会有信息的输出 installApp就是注册为一个windows上的一个服务。上图文件复制的地方 全部复制过去 保留自己需要的 然后去掉后缀.in。下载：linux的目前免费的 windows 64位的好像收费的。前提： 一定要有Java环境（我使用的是jdk1.8）解压的目录，然后我们新建自己的项目目录java-jsw。前面是你解压的原文件 后边是你自己建的目录路径。步骤和上面的一样 不过复制的文件不一样。下载一个社区版本的应该就够用了。需要注意的点 有Java环境。
C#基础（11）函数重载
a6s686的博客
09-12 954
我们通过这些例子的学习，想毕你一定已经掌握了函数重载的相关内容，我相信你只要稍加练习，便能达到很熟练的程度。不过不管知识点难或者简单，还是那句话，学习路上，戒骄戒躁，脚踏实地。请期待我的下一篇博客！
jQuery入门：两种常见调用方式及Ajax基础
3. **AJAX功能**：jQuery的Ajax功能包括load、getScript、getJSON、get、post和ajax这六种请求方式。其中，load方法用于异步加载页面内容并插入到指定元素，而get和post方法是在ajax函数内部被调用的。对于GET请求，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值