Ajax笔记_01(知识点、包含代码和详细解析)

Ajax_01笔记

前置知识点


01_什么是Ajax和axios使用

定义
  • Ajax(Asynchronous JavaScript and XML)是一种用于创建交互式Web应用程序的技术。它通过在不重新加载整个页面的情况下与服务器通信,实现异步数据传输和更新。使用Ajax,可以在用户与网页交互时,向服务器发送请求并接收响应,然后使用JavaScript动态更新页面的部分内容。这样可以提供更流畅和高效的用户体验,减少了不必要的页面刷新。Ajax广泛用于创建各种Web应用,如动态表单验证、自动补全搜索、实时更新等。它基于Web标准技术,包括HTML、CSS、JavaScript和XML/JSON数据格式。
怎么学习Ajax?
    1. 先使用axios库,与服务器进行数据通行。
      • 基于XMLHttpRequest封装、代码简单使用次数高。
      • Vue、React项目中都会用到axios。
    1. 在学习XMLHttpRequest对象的使用,了解Ajax底层原理。
axios的使用
语法:
    1. 引入axios.js官方库地址 : https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js 得到一个全局的axios函数。

    2. 使用axios函数:

      1. 传入配置对象。
      2. 在用.then回调函数接收服务器返回的结果,并做出后续处理。
代码示例

需求:请求目标资源地址,拿到省份列表数据,显示到页面。

目标资源地址:http://hmajax.itheima.net/api/province

<body><!-- axios库地址: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js省份数据地址: http://ajax-api.itheima.net/api/province目标:使用axios库,获取省份列表数据,展示到页面上--><p class="isP"></p><!-- 引入axios库 --><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 引入后得到一个axios函数,并使用axios函数axios({// 资源路径地址url: 'http://ajax-api.itheima.net/api/province'}).then(result => { //result为回调函数的形参// 查看服务器返回的调函数console.log(result)// 查看返回值里面的内容console.log(result.data.data)// 查看返回中message的返回状态console.log(result.data.message)// 将返回的数组转为字符串console.log(result.data.data.join('<br>'))// 插入到标签容器中,渲染视图document.querySelector('.isP').innerHTML = result.data.data.join('<br>')})</script>
</body>

02_认识URL

URL:统一资源定位符,简称网址,用于访问网络上的资源。

新闻数据地址: http://hmajax.itheima.net/api/news

  1. http是协议
  2. hmajax.itheima.net是域名
  3. api/news是资源路径地址

03_查询参数

params查询参数
  • params是一个查询参数对象:语法格式为params: {参数名:值} 。参数名是接口文档中提供的。
  • 作用:使用查询参数提供额外信息,获取对应的数据。

    使用params ,里面添加携带的参数名和参数值即可。

  • 代码演示

<p></p><!-- 城市列表: http://hmajax.itheima.net/api/city参数名: pname值: 省份名字--><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>axios({url: 'http://hmajax.itheima.net/api/city',// 携带查询参数params: {pname: '浙江省'   //后期这里输入的查询值就是让 用户输入的。}}).then(result => {console.log(result.data.list)document.querySelector('p').innerHTML = result.data.list.join('<br>')})</script>

04_查询地区案例

  • 需求:根据用户输入的省份和市区,查询该市区的数据,并渲染到容器视图中。
代码示例
  <script>/*获取地区列表: http://hmajax.itheima.net/api/area查询参数:pname: 省份或直辖市名字cname: 城市名字*/// 获取用户需要查询的内容值const province = document.querySelector('.province')const city = document.querySelector('.city')// 1、这个模块功能是从用户点击事件开始,所以先绑定点击事件document.querySelector('.sel-btn').addEventListener('click', () => {// 2、点击完后,就执行axios函数axios({// 3、向服务器发送查询请求url: 'http://hmajax.itheima.net/api/area',// 4、携带用户输入的查询参数params: {pname: province.value,cname: city.value}}).then(result => {console.log(result.data.list)console.log(result.data.message)const list  = result.data.list// 5、将返回的数组使用map方法操作插入到标签中然后返回新的数组,将新的数组转为字符串形式const res = list.map(item => `<li class="list-group-item">${item}</li>`).join('')  //得到了操作后的新数组,在转字符串//  6、 将map返回的新数组插入到页面视图中document.querySelector('.list-group').innerHTML = resconsole.log(res)})})</script>

map语句的详细解释:

首先,我们有一个res数组。通过map方法,对数组中的每个元素进行处理。箭头函数表达式(item =>

  • ${item}
  • )接收一个参数 item,并返回一个字符串模板,生成一个带有 item值的 <li>元素。

    然后,通过join('')方法将所有处理后的字符串连接在一起,形成一个字符串。

    最终,我们得到一个名为theLi的字符串,其中包含了循环处理后的<li>元素。

05_常用请求方法和数据提交

method: 请求方法,GET可以省略不写(不区分大小写)

data:提交数据

需求: 注册用户: url: 'http://hmajax.itheima.net/api/register,

请求方法: POST

参数名:

​ username: 用户名 (中英文和数字组成, 最少8位)

​ password: 密码 (最少6位)

目标: 点击按钮, 通过axios提交用户和密码, 完成注册

代码示例
   // 1、注册点击事件document.querySelector('.btn').addEventListener('click', () => {// 2、使用axios函数发送请求axios({url: 'http://hmajax.itheima.net/api/register',// 3、声明请求方法method: 'POST',// 4、提交数据data: {username: 'itheima007',password: '7654321'}}).then(result => {         // 5、查看浏览器响应的结果// 浏览器响应状态信息console.log(result.data.message)    //无账号console.log(result.data)    })})

需要提交数据,就得使用post 同时使用data携带需要提交的参数 (params是查询的参数,不要混淆了)

06_axios错误处理

在then方法后面写一个catch方法,传入回调函数并定义形参

代码示例
.then(result => {console.log(result)}).catch(error => {// 错误信息处理console.log(error)console.log(error.response.data.message)})

console.log(error.response.data.message) 就能得到具体的错误信息我们可以将返回的信息通过弹窗返回给用户

07_HTTP协议-请求报文

http协议:规定了浏览器发送及服务器返回内容的格式。

请求报文

请求报文:浏览器按照http协议要求的格式,发送给服务器的内容(就是axios里面的内容)。

请求报文的组成
  1. 请求行:请求方法、URL、协议
  2. 请求头:以键值对的格式携带的附加信息,比如:Content-Type
  3. 空行:分隔请求头,空行之后的是发送给服务器的资源
  4. 请求体:发送的资源

通过chrome 开发者工具中的网络来进行查看

08_请求报文-错误排查

在保证自己测试没问题的时候,使用开发者工具中的网络选项卡进行查看我们报错的信息,观察后对代码进行改进(这样精确定位提高效率)

09_HTTP协议-响应报文

http协议:规定了浏览器发送及服务器返回内容的格式。

响应报文
  • 响应报文:服务器按照http协议要求的格式,返回非浏览器的内容
响应报文的组成
  1. 响应行:(状态行):协议、http响应状态码,返回给浏览器的内容
  2. 响应头:以键值对的格式携带的附加信息,比如:Content-Type
  3. 空行:分隔请求头,空行之后的是发送给服务器的资源
  4. 响应体:返回的资源
响应状态码
状态码说明
1xx信息
2xx成功
3xx重定向消息
4xx客户端错误
5xx服务端错误

例如;404表示(服务器找不到资源)

可以再网络中的响应中查看服务器相应的结果

10_接口文档

接口文档:描述接口的文章

接口:使用Ajax和服务器通讯时,使用的URL,请求方法,以及参数。

重点:就是在于学会看着接口文档的需求来编写代码。

11_用户登录案例

需求
  1. 点击登录时,判断用户名和密码长度
  2. 提交数据和服务通信
  3. 响应提示消息渲染
代码示例
 <script>// 目标1:点击登录时,用户名和密码长度判断,并提交数据和服务器通信document.querySelector('.btn-login').addEventListener('click', () => {// 1、获取用户名和密码框以及value值const username = document.querySelector('.username').valueconst password = document.querySelector('.password').valueconsole.log(username,password)// 2、点击登录时,判断用户名和密码长度if (username.length < 8 || username.length > 16) {alert('用户名不合法')return} else if (password.length < 6 || password.length > 16) {alert('密码不合法')return} else {axios({url: 'http://hmajax.itheima.net/api/login',method: 'post',data: {username,password}}).then((result) => {// 返回服务器响应的状态alert(result.data.message)}).catch((error) => {// 返会服务器响应的错误信息alert(error.response.data.message) })}})</script>
优化提示框后的代码

直接上代码

  <script>// 目标1:点击登录时,用户名和密码长度判断,并提交数据和服务器通信// 目标2:使用提示框,反馈提示消息/* * 提示框需求分析* 1、获取提示框标签* 2、封装一个函数,用于渲染视图。* 3、设置提示文字,以及对应的颜色,成功为绿色,失败为红色* 4、为了让提示框自动隐藏,我们添加一个延迟函数*///  1.获取提示框标签const Alert = document.querySelector('.alert-success')function getAlert(message, flag) {// 3.设置提示文字,以及对应的颜色Alert.innerHTML = messageAlert.classList.add('show')// flag ? 'alert-succes' : 'alert-danger'// console.log(flag ? 'alert-succes' : 'alert-danger')Alert.classList.add(flag ? 'alert-succes' : 'alert-danger')// 4.声明一个延迟函数,用于一定事件后隐藏提示框(也就是移除类名)setTimeout(() => {Alert.classList.remove('show')// 提示框颜色类名重置,也就是本次使用完清除Alert.classList.remove(flag ? 'alert-succes' : 'alert-danger')}, 2000)}// 1.1 登录-点击事件document.querySelector('.btn-login').addEventListener('click', () => {// 1.2 获取用户名和密码const username = document.querySelector('.username').valueconst password = document.querySelector('.password').value// console.log(username, password)// 1.3 判断长度if (username.length < 8) {// 调用函数,渲染当前提示信息getAlert('用户名必须大于等于8位', false)console.log('用户名必须大于等于8位')return // 阻止代码继续执行}if (password.length < 6) {// 调用函数渲染当前提示信息getAlert('密码必须大于等于6位', false)console.log('密码必须大于等于6位')return // 阻止代码继续执行}// 1.4 基于axios提交用户名和密码// console.log('提交数据到服务器')axios({url: 'http://hmajax.itheima.net/api/login',method: 'POST',data: {username,password}}).then(result => {// 调用提示框渲染函数,然后将返回值当做实参getAlert(result.data.message,true)console.log(result)console.log(result.data.message)}).catch(error => {// 调用提示框渲染函数,然后将返回值当做实参getAlert(error.response.data.message,false)console.log(error)console.log(error.response.data.message)})})</script>

12_form-serialize插件使用

作用:

作用: 快速收集表单元素的值

语法

语法: const data = serialize(form,{hash: true,empty: true})

  • serialize函数里面的form可以获得表单中所有name属性标签的值
  1. 把插件引入到自己的网页中
  • 2、 使用serialize函数,快速收集表单元素的值
    参数1、需要获取哪个表单的数据

    • 表单元素设置 name 属性,值会作为对象的属性名

      • 建议 name 属性的值,最好和接口文档参数名一致


      • 参数2、配置对象

        • hash 设置获取数据结构
      • true: js对象 (推荐使用true,因为将获得的对象可以提交给服务器)

      • false: 查询字符串


        • empty 设置是否取空值
      • true: 获取空值(推荐)

      • false: 不获取空值

目标

目标:在点击提交时,使用form-serialize插件,快速收集表单元素值

代码示例
  <form action="javascript:;" class="example-form"><input type="text" name="username"><br><input type="text" name="password"><br><input type="button" class="btn" value="提交"></form><!-- 引入serizlize插件 --><script src="../lib/form-serialize.js"></script><script>//获取按钮标签,注册点击事件document.querySelector('.btn').addEventListener('click', () => {const form = document.querySelector('.example-form')const data = serialize(form,{hash: true,empty: true})   //写这种即可哦// const data = serialize(form,{hash: false ,empty: true})// const data = serialize(form,{hash: false ,empty: true})console.log(data)})</script>
  • 对参数有问题可以看上面的语法

serialize案例


使用插件替代原生js 获取元素的写法。

代码演示

将serialize获取到的js对象,通过 对象解构 拿到里面的值。然后直接传递给axios函数里面的提交数据给服务器

      // 3.1 使用serialize插件const form = document.querySelector('.form')const data = serialize(form, { hash: true, empty: true })console.log(data)   //{username: 'itheima007', password: '7654321'}// 3.2 利用对象 解构 进行取值 由于属性名和属性值相同,此处简写const { username, password} = data// 1.2 获取用户名和密码// const username = document.querySelector('.username').value// const password = document.querySelector('.password').valueconsole.log(username, password)
  • serialize函数里面的form可以获得表单中所有name属性标签的值

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Node.js入门笔记(包含源代码)以及详细解析

Node.js 入门笔记源码 01、如何在终端中执行js 文件 目标&#xff1a;将下面的代码语句在中断中执行 代码演示&#xff1a; console.log(Hello World)for (let i 0;i < 3;i) {console.log(6)}方法&#xff1a;在文件上右击打开在终端中执行&#xff0c;然后输入node空格 输…

关于Python 的 Web 自动化测试的实践

Web 测试是软件测试中比较重要的一个分支&#xff0c;而要实现 Web 自动化测试则要求测试人员能熟练掌握自动化测试工具和编程语言。介绍免费开源的 Web 测试工具 Selenium&#xff0c;以及流行的编程语言 Python。根据自动化测试的原理&#xff0c;对网页元素的常用定位方式&a…

ES6 - Iterator迭代器和for...of 循环

文章目录 前言一、Iterator介绍二、Iterator原理三、实现Iterator接口的原生对象有五、默认调用 Iterator 接口的场合六&#xff0c;for... of 循环七&#xff0c;总结 前言 JavaScript 原有的表示“集合”的数据结构&#xff0c;主要是数组&#xff08;Array&#xff09;和对…

若依框架实现后端防止用户重复点击

若依框架实现后端防止用户重复点击 基于自定义注解、切面、Redis实现 1. 添加自定义注解&#xff1a; 代码放置位置&#xff1a;com/ruoyi/common/annotation/RepeatClick.java time: 时间默认0; unit&#xff1a;单位默认 秒; key: 默认空字符串 package com.ruoyi.fra…

Qt Creator 11 开放源码集成开发环境新增集成终端和 GitHub Copilot 支持

导读Qt 项目今天发布了 Qt Creator 11&#xff0c;这是一款开源、免费、跨平台 IDE&#xff08;集成开发环境&#xff09;软件的最新稳定版本&#xff0c;适用于 GNU/Linux、macOS 和 Windows 平台。 Qt Creator 11 的亮点包括支持标签、多外壳、颜色和字体的集成终端模拟器&am…

【微信小程序创作之路】- 小程序事件绑定、动态提示Toast、对话框 Modal

【微信小程序创作之路】- 小程序事件绑定、动态提示Toast、对话框 Modal 第六章 小程序事件绑定、动态提示Toast、对话框 Modal 文章目录 【微信小程序创作之路】- 小程序事件绑定、动态提示Toast、对话框 Modal前言一、事件是什么&#xff1f;二、小程序中常用事件三、事件传…

2023年受人欢迎的低代码开发平台大盘点

随着企业对于降低成本和加快软件开发的需求增加&#xff0c;低代码开发平台逐渐成为一种受欢迎的选择。这些平台提供了拖放界面和预置组件&#xff0c;使得开发人员可以用更少的代码创建复杂的应用软件。低代码开发平台不仅有助于企业加速数字化转型&#xff0c;而且还能打破业…

URP基于GL的Unity物体网格线绘制方法参考

直接上代码&#xff1a; using System; using System.Collections.Generic; using UnityEngine; using UnityEngine.Rendering;public class GLWireMesh : MonoBehaviour {[Serializable]public class IntPair{public int a;public int b;public IntPair(int a, int b){this.a…

Linux系统管理:虚拟机Rocky Linux安装

目录 一、理论 1.Rocky Linux 2.NetworkManager配置 3.ipaddress 配置文件 4.nmtui 配置 ipaddress 二、实验 1.虚拟机Rocky Linux安装准备阶段 2.安装Rocky Linux 3.进入系统 三、问题 1.网络配置文件权限不够 一、理论 1.Rocky Linux &#xff08;1&#xff0…

下载的谷歌模型如何转为3dtiles

收费工具&#xff0c;学生党勿扰 收费金额1000元 已经购买过工具的大佬&#xff0c;可以免费更新 1 概述 上个月&#xff0c;写了一篇<<谷歌地图模型自动下载>>的文章&#xff0c;效果还不错&#xff0c;能够帮到一些同学。 但是&#xff0c;随着谷歌模型下载的越…

uniapp开发微信小程序--自定义顶部导航栏

一、实现效果&#xff1a; 二、代码实现&#xff1a; 1.在pages.json文件中&#xff0c;单页面定义导航栏&#xff0c;添加以下代码&#xff1a; "navigationStyle": "custom" //自定义导航栏如图所示&#xff1a; 2.在components文件夹下&#xff0c;…

使用多数据源dynamic-datasource-spring-boot-starter遇到的问题记录

记录使用多数据源dynamic-datasource-spring-boot-starter遇到的问题&#xff1a; 1、工程启动失败 缺少clickhouse连接驱动&#xff0c;引入对应的maven依赖 <!--ck连接驱动--><dependency><groupId>ru.yandex.clickhouse</groupId><artifactId>…

【python】数据可视化开发

数据可视化开发 折线图json数据格式python数据和json数据的相互转换 pyecharts模块构建基础折线图全局配置选项set_global_opts方法 数据处理完成折线图 地图动态柱状图二级目录三级目录 折线图 json数据格式 一种轻量级的数据交互模式&#xff0c;可以按照JSON指定的格式去组…

Kylin v10基于cephadm工具离线部署ceph分布式存储

1. 环境&#xff1a; ceph&#xff1a;octopus OS&#xff1a;Kylin-Server-V10_U1-Release-Build02-20210824-GFB-x86_64、CentOS Linux release 7.9.2009 2. ceph和cephadm 2.1 ceph简介 Ceph可用于向云平台提供对象存储、块设备服务和文件系统。所有Ceph存储集群部署都从…

自然语言处理从入门到应用——LangChain:提示(Prompts)-[提示模板:连接到特征存储]

分类目录&#xff1a;《自然语言处理从入门到应用》总目录 特征存储是传统机器学习中的一个概念&#xff0c;它确保输入模型的数据是最新和相关的。在考虑将LLM应用程序投入生产时&#xff0c;这个概念非常重要。为了个性化LLM应用程序&#xff0c;我们可能希望将LLM与特定用户…

制作crate并发布到Crates.io

准备 发布 crate 时, 一旦发布无法修改,无法覆盖, 因此要注意邮箱等一些个人信息 访问crates.io 的 帐号设定页面[1],生成Token 并在命令行 执行 cargo login your token 此命令将告诉 Cargo 你的 API 令牌, 并将其存储在本地 ~/.cargo/credentials crates.io 上crate的名字, 会…

生成测试报告就万事大吉了吗?NO,升职加薪就差这一步啦!- 04(非常详细,非常实用)

简介 上一篇生成测试报告&#xff0c;小伙伴们和童鞋们就又问道&#xff0c;测试报告已经生成了&#xff0c;怎么发送给相关的负责人了&#xff1f;小伙伴们和童鞋们不要着急&#xff0c;慢慢给你道来&#xff0c;心急吃不了热豆腐哈。这些小伙伴们的表现还是不错的&#xff0c…

安装nvm之后,node -v 提示‘node‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件

1. 检查有没有执行这个命令&#xff1a;nvm use [nodejs version name] 2. 检查nvm安装位置同级&#xff0c;有没有nodejs文件夹&#xff0c;是一个快捷键&#xff01;如果有一个其他的nodejs&#xff0c;把它删掉&#xff0c;然后到cmd中&#xff0c;重新nvm install一下&…

【计算机网络】应用层协议 -- 安全的HTTPS协议

文章目录 1. 认识HTTPS2. 使用HTTPS加密的必要性3. 常见的加密方式3.1 对称加密3.2 非对称加密3.3 非对称加密对称加密 4. 引入CA证书4.1 CA认证4.2 数据签名4.3 非对称机密对称加密证书认证4.4 常见问题 5. 总结 1. 认识HTTPS HTTPS全称为 Hyper Text Tranfer Protocol over …

npm, yarn配置

一、npm 1. 查看当前的镜像源。 npm config get registry 2. 设置为淘宝源 npm config set registry https://registry.npm.taobao.org 3. 还原默认源 npm config set registry https://registry.npmjs.org/ 二、Yarn 1.yarn的安装 npm install -g yarn 2. 查看当…