Ajax 笔记（一）

news2024/11/24 6:18:54

笔记目录

  • 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 笔记接口文档：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>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

用MiCoNE工具对16S序列数据进行共现网络分析

用MiCoNE工具对16S序列数据进行共现网络分析

谷禾健康 微生物群通常由数百个物种组成的群落&#xff0c;这些物种之间存在复杂的相互作用。绘制微生物群落中不同物种之间的相互关系&#xff0c;对于理解和控制其结构和功能非常重要。 微生物群高通量测序的激增导致创建了数千个包含微生物丰度信息的数据集。这些丰度可以转…
阅读更多...
umi黑科技：把静态文件打包进静态网页中:P

umi黑科技：把静态文件打包进静态网页中:P

为了能够跨平台通用&#xff0c;我现在很多工具都需要用JS进行开发。 比如我之前研究了半天的JS版本的报表工具。 但是这其中有个问题我没办法解决&#xff0c;就是有一些设置信息或者是模板文件需要一起打包进静态的页面中。 今天解决了这个问题&#xff0c;记录一下方法。 1…
阅读更多...
Android 13 Launcher——屏蔽长按非icon区域出现弹窗

Android 13 Launcher——屏蔽长按非icon区域出现弹窗

目录 一.背景 二.屏蔽此功能 一.背景 长按Launcher非icon区域也是会有弹窗的&#xff0c;会显示小组件等信息&#xff0c;定制开发要求长按非icon区域不要弹窗&#xff0c;我们来实现此功能&#xff0c;先看下未修改前的长按非icon区域的效果 如上图可以看出长按功能显示出壁…
阅读更多...
计网实验第三章：UDP

计网实验第三章：UDP

问题集1 问题一 问题参考Wireshark的报文内容字段的显示信息 在这个数据包中&#xff0c;确定每个UDP报头字段的长度(以字节为单位) 答&#xff1a;96 bytes 问题二 长度字段中的值是什么的长度?你可以参考课文 这个答案)。用捕获的UDP数据包验证您的声明。 答&#xff1…
阅读更多...
Cesium相机理解

Cesium相机理解

关于cesium相机&#xff0c;包括里面内部原理网上有很多人讲的都很清楚了&#xff0c;我感觉这两个人写的都挺好得&#xff1a; 相机 Camera | Cesium 入门教程 (syzdev.cn) Cesium中的相机—setView&lookAtTransform_cesium setview_云上飞47636962的博客-CSDN博客上面这…
阅读更多...
培训报名小程序报名确认开发

培训报名小程序报名确认开发

目录 1 创建页面2 创建URL参数3 信息展示4 消息订阅5 页面传参6 程序预览总结 我们上一篇介绍了报名功能的开发&#xff0c;在用户报名成功后需要展示报名的确认信息&#xff0c;如果信息无误提示用户支付&#xff0c;在支付之前需要让用户进行授权&#xff0c;允许小程序给用户…
阅读更多...
打破传统直播，最新数字化升级3DVR全景直播

打破传统直播，最新数字化升级3DVR全景直播

导语&#xff1a; 近年来&#xff0c;随着科技的不断创新和发展&#xff0c;传媒领域也正经历着一场前所未有的变革。在这个数字化时代&#xff0c;直播已经不再仅仅是在屏幕上看到一些人的视频&#xff0c;而是将观众带入一个真实世界的全新体验。其中&#xff0c;3DVR全景直…
阅读更多...
Windows11右键菜单

Windows11右键菜单

刚开始使用Windows11时&#xff0c;新的右键菜单用起来很不习惯。 记录一下修改和恢复Windows11的右键菜单的方法。 1.Win11切换到旧版右键菜单&#xff1a; 方法&#xff1a;WinR打开CMD&#xff0c;运行下面的命令行 添加注册列表重启Windows资源管理器 reg add "HKC…
阅读更多...
elevation mapping学习笔记3之使用D435i相机离线或在线订阅点云和tf关系生成高程图

elevation mapping学习笔记3之使用D435i相机离线或在线订阅点云和tf关系生成高程图

文章目录 0 引言1 数据1.1 D435i相机配置1.2 协方差位姿1.3 tf 关系2 离线demo2.1 yaml配置文件2.2 launch启动文件2.3 数据录制2.4 离线加载点云生成高程图3 在线demo3.1 launch启动文件3.2 CMakeLists.txt3.3 在线加载点云生成高程图0 引言 elevation mapping学习笔记1已经成…
阅读更多...
内网穿透：如何通过公网访问本地Web服务器？

内网穿透：如何通过公网访问本地Web服务器？

文章目录 前言1. 首先安装PHPStudy2.下载一个开源的网页文件3. 选择“创建网站”并将网页内容指向下载好的开源网页文件4. 打开本地网页5. 打开本地cpolar客户端6. 保存隧道设置 生成数据隧道 前言 随着科技进步和时代发展&#xff0c;计算机及互联网已经深深融入我们的生活和…
阅读更多...
Activiti7工作流

Activiti7工作流

一、Activiti7概述 官网地址&#xff1a;https://www.activiti.org/ Activiti由Alfresco软件开发&#xff0c;目前最高版本Activiti 7。是BPMN的一个基于java的软件实现&#xff0c;不过 Activiti 不仅仅包括BPMN&#xff0c;还有DMN决策表和CMMN Case管理引擎&#xff0c;并且…
阅读更多...
5个最流行的免费AI应用托管平台

5个最流行的免费AI应用托管平台

完成机器学习项目后&#xff0c;是时候展示你的模型的性能了。 你可以创建前端应用程序或使用 REST API。 随着 Streamlit、Gradio 和 FAST API 的引入&#xff0c;创建前端应用程序变得无忧无虑。 这些 Web 框架需要几行代码来创建交互式用户界面。 与公众分享你的工作有助于你…
阅读更多...
0-1搭建vue项目工程

0-1搭建vue项目工程

一、下载node.js 简单介绍&#xff1a; Node.js是一个基于V8引擎的JavaScript运行时环境&#xff0c;它允许开发者在服务器端使用JavaScript进行开发。Node.js是一个非常强大的工具&#xff0c;可以帮助开发者构建高性能、可扩展的Web应用程序&#xff0c;并且可以与各种技术…
阅读更多...
使用appuploader工具流程（Windows版本）

使用appuploader工具流程（Windows版本）

转载&#xff1a;使用appuploader工具流程&#xff08;Windows版本&#xff09; 目录 转载&#xff1a;使用appuploader工具流程&#xff08;Windows版本&#xff09; 一.登录apple官网&#xff0c;注册账号 二.下载Appuploader和登录 三.bundle ID 四.设备管理 五.证书管…
阅读更多...
【python】 油管外挂字幕下载位srt歌词字幕文本文件

【python】 油管外挂字幕下载位srt歌词字幕文本文件

【python】 油管外挂字幕下载位srt文本文件 案例截图 案例代码 # python程序&#xff0c;可以下youtube视频的字幕文件。输入一个视频的url&#xff0c;就会下载它的字幕文件到一个文件夹里。 # Author WeChat:****请私信, # Date:2023-8-2, # Email:ack1024#hotmail.com # 本…
阅读更多...
全国首创！法大大助力深圳率先在企业开办领域引入音视频双录签名模式

全国首创！法大大助力深圳率先在企业开办领域引入音视频双录签名模式

为了进一步规范市场主体登记行为&#xff0c;提高企业办事便利度&#xff0c;近日深圳引入录音录像双录签名新模式&#xff0c;实现用户无介质全流程快捷申报&#xff0c;进一步降低了开办企业成本&#xff0c;为企业开办注入加速度。 无需法人、监事等企业负责人再到业务办理大…
阅读更多...
Python - series和dataframe的关系

Python - series和dataframe的关系

目录 1 series和dataframe的关系 2 创建一个df 3 用index过滤不同行 4 用row 过滤 5 用series构建dataframe 1 series和dataframe的关系 类似集合与元素的关系DataFrame中的一行or一列的取值&#xff0c;返回的结果都是series通过几个series&#xff0c;可以创建一个da…
阅读更多...
Redis的安装方法与基本操作

Redis的安装方法与基本操作

目录 前言 一、REDIS概述 二、REDIS安装 1、编译安装 2.yum安装 三、Redis的目录结构 四、基础命令解析 五、在一台服务器上启动多个redis 六、数据库的基本操作 &#xff08;一&#xff09;登录数据库 &#xff08;二&#xff09;基础命令 七、Redis持久化 &#xff08;一&…
阅读更多...
【EI复现】梯级水光互补系统最大化可消纳电量期望短期优化调度模型（Matlab代码实现）

【EI复现】梯级水光互补系统最大化可消纳电量期望短期优化调度模型（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
Tomcat线程池原理

Tomcat线程池原理

1. 一个 SpringBoot 项目能同时处理多少请求&#xff1f;tomcat容器&#xff0c; 200 次。 2. 怎么来的&#xff1f; 而点击这些线程&#xff0c;查看其堆栈消息&#xff0c;可以看到 Tomcat、threads、ThreadPoolExecutor 等关键字 基于“短时间内有 200 个请求被立马处理…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023