Ajax 笔记（一）—— Ajax 入门

笔记目录

  • 1. Ajax 入门
    • 1.1 Ajax 概念
    • 1.2 axios 使用
      • 1.2.1 URL
      • 1.2.2 URL 查询参数
      • 1.2.3 小案例-查询地区列表
      • 1.2.4 常用请求方法和数据提交
      • 1.2.5 错误处理
    • 1.3 HTTP 协议
      • 1.3.1 请求报文
      • 1.3.2 响应报文
    • 1.4 接口文档
    • 1.5 案例
      • 1.5.1 用户登录（主要业务）
      • 1.5.2 用户登录（提示信息）
      • 1.5.3 利用 form-serialize 插件优化代码

Ajax 笔记：

Ajax 笔记（一）—— Ajax 入门

Ajax 笔记（二）—— Ajax 案例

Ajax 笔记（三）—— Ajax 原理

Ajax 笔记（四）—— Ajax 进阶

Ajax 笔记接口文档：https://apifox.com/apidoc/shared-fa9274ac-362e-4905-806b-6135df6aa90e/doc-842135

1. Ajax 入门

1.1 Ajax 概念

  1. AJAX 概念

  • 使用浏览器的 XMLHttpRequest 对象 与 服务器 通信

  • 浏览器网页中，使用 AJAX技术（XHR对象）发起获取数据的请求，服务器代码响应准备好的数据给前端，前端拿到数据数组以后，展示到网页

  1. 什么是服务器？
  • 可以暂时理解为提供数据的一台电脑
  1. AJAX 入门学习
  • 使用一个第三方库叫 axios, 后续在学习 XMLHttpRequest 对象了解 AJAX 底层原理
  • 因为 axios 库语法简单，让我们有更多精力关注在与服务器通信上，而且后续 Vue，React 学习中，也使用 axios 库与服务器通信

1.2 axios 使用

  1. 引入 axios.js 文件到自己的网页中

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  1. axios 语法
   axios({
     url: '目标资源地址',
     method: '请求方法',
     params: {
        参数名: 值
  }
   }).then((result) => {
     // 对服务器返回的数据做后续处理
   })

注意：请求的 url 地址, 就是标记资源的网址

1.2.1 URL

URL 是统一资源定位符，简称网址，用于定位网络中的资源（资源指的是：网页，图片，数据，视频，音频等等）
在这里插入图片描述

  1. http：叫超文本传输协议，规定了浏览器和服务器传递数据的格式
  2. 域名：标记了服务器在互联网当中的方位
  3. 资源路径：一个服务器内有多个资源，用于标识你要访问的资源具体的位置

1.2.2 URL 查询参数

查询参数：携带给服务器额外信息，让服务器返回我想要的某一部分数据而不是全部数据。

在 url 网址后面用?拼接格式：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2

1.2.3 小案例-查询地区列表

/*
获取地区列表: http://hmajax.itheima.net/api/area
查询参数:
    pname: 省份或直辖市名字
    cname: 城市名字
*/
// 目标: 根据省份和城市名字, 查询地区列表
// 1. 查询按钮-点击事件
document.querySelector('.sel-btn').addEventListener('click', () => {
    // 2. 获取省份和城市名字
    let pname = document.querySelector('.province').value
    let cname = document.querySelector('.city').value

    // 3. 基于axios请求地区列表数据
    axios({
        url: 'http://hmajax.itheima.net/api/area',
        params: {
        // 当属性名和value位置变量名同名即可简写
            pname,
            cname
        }
    }).then(result => {
        // console.log(result)
        // 4. 把数据转li标签插入到页面上
        let list = result.data.list
        console.log(list)
        let theLi = list.map(areaName => `<li class="list-group-item">${areaName}</li>`).join('')
        console.log(theLi)
        document.querySelector('.list-group').innerHTML = theLi
    })
})

1.2.4 常用请求方法和数据提交

在这里插入图片描述
axios内部设置了默认请求方法就是GET，没有写就按默认处理

   axios({
     url: '目标资源地址',
     method: '请求方法',
     data: {
         参数名: 值
   }).then((result) => {
     // 对服务器返回的数据做后续处理
   })

url：目标资源地址，method：请求方法，params：查询参数，data：提交的数据

1.2.5 错误处理

普通用户不会去控制台里看错误信息，我们要编写代码拿到错误并展示给用户在页面上

axios({
  // ...请求选项
}).then(result => {
  // 处理成功数据
}).catch(error => {
  // 处理失败错误
})

1.3 HTTP 协议

HTTP 协议规定了浏览器和服务器返回内容的格式

1.3.1 请求报文

请求报文：是浏览器按照协议规定发送给服务器的内容
在这里插入图片描述

请求报文的组成：

  • 请求行：请求方法，URL，协议
  • 请求头：以键值对的格式携带的附加信息，比如：Content-Type（指定了本次传递的内容类型）
  • 空行：分割请求头，空行之后的是发送给服务器的资源
  • 请求体：发送的资源

查看方式：

在这里插入图片描述

1.3.2 响应报文

在这里插入图片描述
响应报文的组成：

  • 响应行（状态行）：协议，HTTP响应状态码，状态信息
  • 响应头：以键值对的格式携带的附加信息，比如：Content-Type（告诉浏览器，本次返回的内容类型）
  • 空行：分割响应头，控制之后的是服务器返回的资源
  • 响应体：返回的资源

HTTP 响应状态码
在这里插入图片描述

1.4 接口文档

由后端提供的描述接口的文章

接口：指的使用 AJAX 和 服务器通讯时，使用的 URL，请求方法，以及参数

1.5 案例

1.5.1 用户登录（主要业务）

// 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信

// 1.1 登录-点击事件
document.querySelector('.btn-login').addEventListener('click', () => {
  // 1.2 获取用户名和密码
  const username = document.querySelector('.username').value
  const password = document.querySelector('.password').value
  // console.log(username, password)

  // 1.3 判断长度
  if (username.length < 8) {
    console.log('用户名必须大于等于8位')
    return // 阻止代码继续执行
  }
  if (password.length < 6) {
    console.log('密码必须大于等于6位')
    return // 阻止代码继续执行
  }

  // 1.4 基于axios提交用户名和密码
  // console.log('提交数据到服务器')
  axios({
    url: 'http://hmajax.itheima.net/api/login',
    method: 'POST',
    data: {
      username,
      password
    }
  }).then(result => {
    console.log(result)
    console.log(result.data.message)
  }).catch(error => {
    console.log(error)
    console.log(error.response.data.message)
  })
})

在这里插入图片描述

1.5.2 用户登录（提示信息）

/**
 * 2.2 封装提示框函数，重复调用，满足提示需求
 * 功能：
 * 1. 显示提示框
 * 2. 不同提示文字msg，和成功绿色失败红色isSuccess（true成功，false失败）
 * 3. 过2秒后，让提示框自动消失
*/
function alertFn(msg, isSuccess) {
  // 1> 显示提示框
  myAlert.classList.add('show')

  // 2> 实现细节
  myAlert.innerText = msg
  const bgStyle = isSuccess ? 'alert-success' : 'alert-danger'
  myAlert.classList.add(bgStyle)

  // 3> 过2秒隐藏
  setTimeout(() => {
    myAlert.classList.remove('show')
    // 提示：避免类名冲突，重置背景色
    myAlert.classList.remove(bgStyle)
  }, 2000)
}

1.5.3 利用 form-serialize 插件优化代码

使用 form-serialize 插件，一次性快速收集目标表单范围内表单元素的值

form-serialize 插件语法：

  1. 引入 form-serialize 插件到自己网页中
  2. 使用 serialize 函数
    • 参数1：要获取的 form 表单标签对象（要求表单元素需要有 name 属性-用来作为收集的数据中属性名）
    • 参数2：配置对象
      • hash：
        • true - 收集出来的是一个 JS 对象结构
        • false - 收集出来的是一个查询字符串格式
      • empty：
        • true - 收集空值
        • false - 不收集空值

代码优化

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11.案例_登录</title>
    <!-- 引入bootstrap.css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
    <!-- 公共 -->
    <style>
        html,
        body {
            background-color: #EDF0F5;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            width: 520px;
            height: 540px;
            background-color: #fff;
            padding: 60px;
            box-sizing: border-box;
        }

        .container h3 {
            font-weight: 900;
        }
    </style>
    <!-- 表单容器和内容 -->
    <style>
        .form_wrap {
            color: #8B929D !important;
        }

        .form-text {
            color: #8B929D !important;
        }
    </style>
    <!-- 提示框样式 -->
    <style>
        .alert {
            transition: .5s;
            opacity: 0;
        }

        .alert.show {
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="container">
        <h3>欢迎-登录</h3>
        <!-- 登录结果-提示框 -->
        <div class="alert alert-success" role="alert">
            提示消息
        </div>
        <!-- 表单 -->
        <div class="form_wrap">
            <form class="login-form">
                <div class="mb-3">
                    <label for="username" class="form-label">账号名</label>
                    <input name="username" type="text" class="form-control username">
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label">密码</label>
                    <input name="password" type="password" class="form-control password">
                </div>
                <button type="button" class="btn btn-primary btn-login"> 登 录 </button>
            </form>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 3.1 引入插件 -->
    <script src="./form-serialize.js"></script>
    <script>
        function alertFn(msg, isSuccess) {
                // 1> 显示提示框
                myAlert.classList.add('show')

                // 2> 实现细节
                myAlert.innerText = msg
                const bgStyle = isSuccess ? 'alert-success' : 'alert-danger'
                myAlert.classList.add(bgStyle)

                // 3> 过2秒隐藏
                setTimeout(() => {
                    myAlert.classList.remove('show')
                    // 提示：避免类名冲突，重置背景色
                    myAlert.classList.remove(bgStyle)
                }, 2000)
            }
    // 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信

        // 1.1 登录-点击事件
        document.querySelector('.btn-login').addEventListener('click', () => {
            // 1.2 获取用户名和密码
            // const username = document.querySelector('.username').value
            // const password = document.querySelector('.password').value
            // // console.log(username, password)

            // 3.2 使用serialize函数，收集登录表单里用户名和密码
            const form = document.querySelector('.login-form')
            const data = serialize(form, { hash: true, empty: true })
            console.log(data)
            // {username: 'itheima007', password: '7654321'}
            const { username, password } = data

            // 1.3 判断长度
            if (username.length < 8) {
                console.log('用户名必须大于等于8位')
                return // 阻止代码继续执行
            }
            if (password.length < 6) {
                console.log('密码必须大于等于6位')
                return // 阻止代码继续执行
            }

            // 1.4 基于axios提交用户名和密码
            // console.log('提交数据到服务器')
            axios({
                url: 'http://hmajax.itheima.net/api/login',
                method: 'POST',
                data: {
                    username,
                    password
                }
            }).then(result => {
                console.log(result)
                console.log(result.data.message)
            }).catch(error => {
                console.log(error)
                console.log(error.response.data.message)
            })
        })
    </script>
</body>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/73709.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

会玩这 10 个 Linux 命令，一定是个有趣的 IT 男！

会玩这 10 个 Linux 命令，一定是个有趣的 IT 男！

Linux当中有很多比较有趣的命令&#xff0c;可以动手看看&#xff0c;很简单的。 1.rev命令 一行接一行地颠倒所输入的字符串。 运行&#xff1a; $rev如输入&#xff1a;shiyanlou shiyanlou2.asciiview命令 1.先安装aview $sudo apt-get install aview2.再安装imagema…
阅读更多...
react中使用路由起手式,一些思路和细节。

react中使用路由起手式,一些思路和细节。

一.安装并配置 我们选择使用react-router实现路由效果 yarn add react-router-dom下载后需要对Route进行引入&#xff0c;是个内置的组件。该组件是有两个属性一个是path&#xff0c;一个是component&#xff0c;path是组件对应的路由&#xff0c;component是对应的组件 二.…
阅读更多...
蓝帽杯 取证2022

蓝帽杯 取证2022

网站取证 网站取证_1 下载附件 并解压 得到了一个文件以及一个压缩包 解压压缩包 用火绒查病毒 发现后门 打开文件路径之后 发现了一句话木马 解出flag 网站取证_2 让找数据库链接的明文密码 打开www文件找找 查看数据库配置文件/application/database.php&#xff08;CodeI…
阅读更多...
php如何对接伪原创api

php如何对接伪原创api

在了解伪原创api的各种应用形态之后&#xff0c;我们继续探讨智能写作背后的核心技术。需要说明的是&#xff0c;智能写作和自然语言生成、自然语言理解、知识图谱、多模算法等各类人工智能算法都有紧密的关联&#xff0c;在百度的智能写作实践中&#xff0c;常根据实际需求将多…
阅读更多...
C++11时间日期库chrono的使用

C++11时间日期库chrono的使用

chrono是C11中新加入的时间日期操作库&#xff0c;可以方便地进行时间日期操作&#xff0c;主要包含了&#xff1a;duration, time_point, clock。 时钟与时间点 chrono中用time_point模板类表示时间点&#xff0c;其支持基本算术操作&#xff1b;不同时钟clock分别返回其对应…
阅读更多...
Jmeter-压测时接口按照顺序执行-临界部分控制器

Jmeter-压测时接口按照顺序执行-临界部分控制器

文章目录 临界部分控制器存在问题 临界部分控制器 在进行压力测试时&#xff0c;需要按照顺序进行压测&#xff0c;比如按照接口1、接口2、接口3、接口4 进行执行 查询结果是很混乱的&#xff0c;如果请求次数少&#xff0c;可能会按照顺序执行&#xff0c;但是随着次数增加&a…
阅读更多...
XML 数据传输格式

XML 数据传输格式

目录 XML简介 一、初识XML 1.什么是 XML&#xff1f; 2.XML 和 HTML 之间的差异 3.XML 不会做任何事情 4.通过 XML 您可以发明自己的标签 5.XML 不是对 HTML 的替代 二、XML 用途 1.XML 把数据从 HTML 分离 2.XML 简化数据共享 3.XML 简化数据传输 三、XML 树结构 1.一个 XML 文…
阅读更多...
大语言模型：LLM的概念是个啥？

大语言模型：LLM的概念是个啥？

一、说明 大语言模型&#xff08;维基&#xff1a;LLM- large language model&#xff09;是以大尺寸为特征的语言模型。它们的规模是由人工智能加速器实现的&#xff0c;人工智能加速器能够处理大量文本数据&#xff0c;这些数据大部分是从互联网上抓取的。 [1]所构建的人工神…
阅读更多...
Word（1）：文章页码设置

Word（1）：文章页码设置

1.需求 在文档的封皮页不设置页码&#xff0c;在目录页页码设置为罗马数字&#xff0c;在正文使用阿拉伯数字。 2.解决方法 step1&#xff1a; 在封皮页的最后&#xff0c;点击”插入“-分隔符-分节符&#xff08;下一页&#xff09; step2&#xff1a;在目录页的最后&…
阅读更多...
Amazon EMR Hudi 性能调优——Clustering

Amazon EMR Hudi 性能调优——Clustering

随着数据体量的日益增长&#xff0c;人们对 Hudi 的查询性能也提出更多要求&#xff0c;除了 Parquet 存储格式本来的性能优势之外&#xff0c;还希望 Hudi 能够提供更多的性能优化的技术途径&#xff0c;尤其当对 Hudi 表进行高并发的写入&#xff0c;产生了大量的小文件之后&…
阅读更多...
【C/C++】STL queue 非线程安全接口，危险！

【C/C++】STL queue 非线程安全接口，危险！

STL 中的 queue 是非线程安全的&#xff0c;一个组合操作&#xff1a;front(); pop() 先读取队首元素然后删除队首元素&#xff0c;若是有多个线程执行这个组合操作的话&#xff0c;可能会发生执行序列交替执行&#xff0c;导致一些意想不到的行为。因此需要重新设计线程安全的…
阅读更多...
U盘安装CentOS7系统出现dracut timeout的解决办法

U盘安装CentOS7系统出现dracut timeout的解决办法

文章目录 业务场景操作步骤U盘装CentOS7系统确定U盘盘符修改启动命令系统配置 总结 业务场景 我们在某市实施交通信控平台项目&#xff0c;我们申请了一台服务器&#xff0c;用于平台安装由于机房机器只有内网&#xff0c;不连互联网&#xff0c;我们无法安装所需要的软件&…
阅读更多...
考公-判断推理-逻辑判断

考公-判断推理-逻辑判断

且和或 只能有一个人是我老婆&#xff0c;要么小红&#xff0c;要么小丽&#xff0c;不可能都是我老婆&#xff0c;虽然有些人心里是这么想的 虽然&#xff0c;但是&#xff0c;且 虽然我很丑&#xff0c;但是我很温柔 或的翻译&#xff0c;否一推一 例题 例题 德摩根 例题…
阅读更多...
EndNote 21 for Mac(文献管理软件) v21.0.1中文版

EndNote 21 for Mac(文献管理软件) v21.0.1中文版

EndNoter mac是一款参考文献管理软件&#xff0c;旨在帮助学术研究者、学生和专业人士有效地管理和引用参考文献。该软件提供了许多功能&#xff0c;使用户可以轻松地组织、搜索和引用各种类型的文献。 EndNoter mac软件特点和功能 1. 参考文献管理&#xff1a;EndNoter允许用…
阅读更多...
精挑细选的几个宝藏软件

精挑细选的几个宝藏软件

是不是感觉你的电脑里面永远都缺少一款软件&#xff1f;每次想要使用某个功能的时候总是不能找到合适的&#xff0c;还要先去网上找&#xff0c;小编给大家分享几款超级实用的软件&#xff0c;建议低调收藏哦~ Proxyee-down/下载工具 proxyee-down是一款免费开源的http下载工…
阅读更多...
Nginx之lnmp架构

Nginx之lnmp架构

目录 一.什么是LNMP二.LNMP环境搭建1.Nginx的搭建2.安装php3.安装数据库4.测试Nginx与PHP的连接5.测试PHP连接数据库 一.什么是LNMP LNMP是一套技术的组合&#xff0c;Llinux&#xff0c;Nnginx&#xff0c;Mmysql&#xff0c;Pphp 首先Nginx服务是不能处理动态资源请求&…
阅读更多...
urllib与数据解析

urllib与数据解析

urllib爬取数据 import urllib.request as request# 定义url url "https://www.baidu.com" #模拟浏览器发起请求获取响应对象 response request.urlopen(url)""" read方法返回的是字节形式的二进制数据 二进制--》字符串 解码 decode( 编码的格式…
阅读更多...
【视频】使用OBS将MP4推流至腾讯云直播

【视频】使用OBS将MP4推流至腾讯云直播

1、下载OBS OBS官网：https://obsproject.com/ OBS支持Win、Mac、Linux，如果下载速度很慢，建议使用迅雷下载 2、OBS推流设置 2.1 添加场景 默认会有一个“场景”，如果想继续添加可以点击“+”按钮 2.2 添加媒体源 1）点击“来源”窗口中“+”按钮 2）支持的媒体源如…
阅读更多...
微信小程序调用map数据 并在wxml中对数组进行截取的操作

微信小程序调用map数据 并在wxml中对数组进行截取的操作

wxs文件的位置如图 实现数组截取 只保留五张图片 <wxs module"filter" src"./slicefunc.wxs"></wxs> <view class"wrap"><view class"search-box" bindtap"toSearch"><view class"v1"…
阅读更多...
SDK是什么，SDK和API有什么区别

SDK是什么，SDK和API有什么区别

SDK&#xff08;Software Development Kit&#xff09;是一种开发工具包&#xff0c;通常由软件开发公司或平台提供&#xff0c;用于帮助开发人员构建、测试和集成特定平台或软件的应用程序。SDK 包含一系列的库、工具、示例代码和文档&#xff0c;旨在简化开发过程并提供所需的…
阅读更多...
最新文章

Copyright @ 2022~2023