AJAX-04-笔记

最新推荐文章于 2024-07-25 10:06:21 发布
最新推荐文章于 2024-07-25 10:06:21 发布
阅读量55 收藏
点赞数
分类专栏： AJAX 文章标签： ajax js html java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24410589/article/details/117882169
版权

AJAX-04-笔记

AJAX 综合案例

1、综合案例 搜索联想

  • 案例效果和环境介绍
    在这里插入图片描述

  • 案例分析

    • 页面
      1. 为用户名输入框绑定鼠标点击事件。
      2. 获取输入的用户名数据。
      3. 判断用户名是否为空。
      4. 如果为空，则将联想提示框隐藏。
      5. 如果不为空，则发送 AJAX 请求，并将响应的数据显示到联想框。
    • 控制层
      1. 获取请求参数。
      2. 调用业务层的模糊查询方法。
      3. 将返回的数据转成 JSON，并响应给客户端。

  • 代码实现

    • html页面

      <!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>

    • 控制层-Java代码

      @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);
    }
}

2、综合案例 分页

​ 瀑布流无限加载数据分页

2.1、案例效果和环境准备

  • 案例效果
    在这里插入图片描述

  • 环境准备

    • 1.导入sql文件

      -- 创建db11数据库
CREATE DATABASE db11;

-- 使用db11数据库
USE db11;

-- 创建数据表
CREATE TABLE news(
	id INT PRIMARY KEY AUTO_INCREMENT,	-- 主键id
	title VARCHAR(999)                      -- 新闻标题
);

-- 插入数据
DELIMITER $$
CREATE PROCEDURE create_data()		
BEGIN
DECLARE i INT;		
SET i=1;
WHILE i<=100 DO	
	INSERT INTO news VALUES (NULL,CONCAT('奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实”',i));	
SET i=i+1;		
END WHILE;
END 
$$

-- 调用存储过程
CALL create_data();

    • 2.导入“分页案例原始环境”中的ajax项目

2.2、案例的分析

  • 如何确定当前显示的数据已经浏览完毕？

    • 公式：(滚动条距底部的距离 + 滚动条上下滚动的距离 + 当前窗口的高度) >= 当前文档的高度
    • 当前文档高度：存储10条数据，100px。
    • 滚动条距底部的距离：1px。
    • 当前窗口的高度：80px。
    • 滚动条上下滚动的距离：>=19px。

  • 前置知识
    在这里插入图片描述

2.3、案例的实现

  • 实现思路
    • 页面
      1. 定义发送请求标记。
      2. 定义当前页码和每页显示的条数。
      3. 定义滚动条距底部的距离。
      4. 设置页面加载事件。
      5. 为当前窗口绑定滚动条滚动事件。
      6. 获取必要信息(当前窗口的高度,滚动条上下滚动的距离,当前文档的高度)。
      7. 计算当前展示数据是否浏览完毕。
      8. 判断请求标记是否为 true。
      9. 将请求标记置为 false，当前异步操作完成前，不能重新发起请求。
      10. 根据当前页和每页显示的条数来请求查询分页数据。
      11. 当前页码+1。
    • 服务器
      1. 获取请求参数(当前页,每页显示的条数)。
      2. 根据当前页码和每页显示的条数，调用业务层的方法，得到分页 Page 对象。
      3. 将得到的数据转为 json。
      4. 将数据响应给客户端。

  • 代码实现

    • html页面

      <script>
	//1.定义发送请求标记
    let send = true;

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

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

    //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>

    • java代码

      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);
    }
}
寻7
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax-笔记 如何用 xhr 向服器发送请求
qiaokelizhuzhu的博客
04-23 790
ajax-笔记 如何用 xhr 向服器发送请求
Ajax--笔记
weixin_45330572的博客
01-13 376
AJAX：Asynchronous JacaScript and XML （异步的 JavaScript 和 XML） synchronous：同步 Asynchronous：异步 Ajax是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。-------------更好更快以及交互性更强的Web应用程序的技术 例子： jsp页面 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html>
Django之Ajax实战笔记--城市级联操作
xyh2004的博客
05-25 846
在myapp应用目录下创建一个路由文件urls.py文件，注意此文件编码为utf-8（建议复制一个）。2.2 编写model类：打开tpdemo/myapp/models.py文件。2.1 将提前准备好的district.sql信息导入到mydb数据库中。在mydb数据库中存在一个district（城市区县信息表）1.1 创建项目tpdemo,创建应用myapp。2.5 开发网页前端的准备：首先启用静态资源目录。1.5 配置当前应用myapp的路由配置。
Ajax、Axios --javaweb学习笔记
m0_71386740的博客
04-20 329
AJAX异步不重新加载整个页面更新部分网页原生Ajax（繁琐）
尚硅谷Ajax学习笔记--操作部分
weixin_51574027的博客
07-07 1379
ajax的基本操作，使用node+express实现，编辑器为vscode
前端必学-----AJax--笔记---01
一个前端小学生的博客
04-25 691
前几天学习Ajax，网上的视频只有6节课，六节课过后，竟然不知到什么是Ajax，于是下载了几本书，看了很多，感觉还是不理解，于是，通过做笔记，一句一句解读代码的方式，在今天下午突然感觉理解了很多，特在此与大家分享一些我的心得。       通过对Ajax这门技术的解读，我感觉他很重要，而且用的地方很多，所以一定要把他学懂，好了废话不多说。（还有我在最后留下的习题，希望大家认真的回答） 1.
【Ajax】笔记-Axios与函数发送AJAX请求
德仔
07-24 499
1、Axios是一个基于Promise的HTTP库，而Ajax是对原生XHR的封装；2、Ajax技术实现了局部数据的刷新，而Axios实现了对ajax的封装。
AJAX 入门-笔记
weixin_46441425的博客
03-23 368
Ajax学习笔记
2301_82244607的博客
04-28 956
XMLHttpRequest()：创建 XHR 对象的构造函数status：响应状态码值，如 200、404statusText：响应状态文本，如 ’ok‘、‘not found’readyState：标识请求状态的只读属性 0-1-2-3-4onreadystatechange：绑定 readyState 改变的监听responseType：指定响应数据类型，如果是 ‘json’，得到响应后自动解析响应response：响应体数据，类型取决于 responseType 的指定。
leaflet学习笔记-leaflet-ajax获取数据（五）
花姐夫JUN的博客
12-27 747
地图开发中都会用一些GeoJSON数据进行渲染，这是用就会需要加载GeoJSON数据，这时就可以使用leaflet-ajax进行数据的获取。
JS-Ajax-jQuery笔记1
04-30
JS-Ajax-jQuery笔记，学习笔记，JavaScript，JS-Ajax-jQuery笔记，学习笔记，JavaScript，
ajax-day01.rar_达内开发学习笔记
09-20
在“ajax-day01.rar_达内开发学习笔记”这个压缩包中，包含了第一天学习Ajax的基础内容，旨在帮助初学者理解并掌握Ajax的核心概念和使用方法。** **一、Ajax简介** Ajax并不是一种单一的技术，而是一组技术的组合，...
AJAX-Study:AJAX学习的笔记
05-29
AJAX的学习笔记(Node.js环境) AJAX学习的笔记，主要环境为Node.js 课程地址： 第一章： 原生Ajax 1.1 Ajax简介 Ajax全称为Asynchronous Javascript And XML，即异步JS和XML 通过Ajax可以在浏览器中向服务器发送异步...
ajax笔记ajax笔记ajax笔记
04-03
ajax笔记
ajax-wp-editor
05-13
笔记 ob_start (); wp_editor ( '' , 'initialize' ); $ editor = ob_get_clean (); // We do not need the editor on the page load so no echo. 需要上述内容才能在页脚中加载所需的脚本，以便wp_editor通过ajax...
AjaX 数据爬取
最新发布
qq_39217312的博客
07-25 1112
Ajax 全称： Asynchronous JavaScript and XML , 即异步的 JavaScript 和 XML， 它不是一门编程语言，而是利用 JavaScript 在保证页面不被刷新，页面链接不改变的情况下与服务器交换数据，并更新部分网页内容的技术对于传统网页，如果想要更新内容，就必须刷新整个页面， 但有了 Ajax ，可以在页面不被全部刷新的情况下更新。这个过程实际是页面在后台与服务器进行了数据交互，获取数据后，在利用 JavaScript 改变网页，这样网页内容就会更新了。
Vue.js 与 Ajax（vue-resource）的集成应用
lly202406的博客
07-25 536
Vue.js 是一款流行的前端JavaScript框架，以其简洁、灵活和高效的特点而受到开发者的喜爱。在实际开发中，与后端服务的通信是不可或缺的，而Ajax技术是实现这一功能的关键。在Vue.js中，是一个常用的插件，它提供了一种简单的方式来执行Ajax请求。本文将详细介绍Vue.js与Ajax（通过vue-resource）的集成应用，包括安装、基本使用、进阶技巧以及实际开发中的最佳实践。
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 3338
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
【HTML】iframe
小秀的博客
07-24 371
标签是 HTML 中的⼀个元素，⽤于在当前 HTML ⽂档中嵌⼊另⼀个 HTML ⽂档。它可以在⼀个 HTML ⻚⾯中嵌⼊另⼀个 HTML ⻚⾯或其他类型的⽂档，⽐如 PDF ⽂件或视频⽂件。其中 src 属性指定要嵌⼊的⽂档的 URL，可以是⼀个 HTML ⻚⾯、⼀个 PDF ⽂件或⼀个视频⽂件等等。通过设置 width 和 height 属性可以指定。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值