Ajax入门与使用

目录

◆ AJAX 概念和 axios 使用

什么是 AJAX？

怎么发送 AJAX 请求？ 

如何使用axios 

axios 函数的基本结构

axios 函数的使用场景

1 没有参数的情况

2 使用params参数传参的情况

3  使用data参数来处理请求体的数据

4  上传图片等二进制的情况

form-serialize 插件

◆ AJAX 概念和 axios 使用

什么是 AJAX？

概念：AJAX 是浏览器与服务器进行数据通信的技术 

怎么发送 AJAX 请求？ 

1. 使用 axios [æk‘sioʊs] 库

  • 基于 XMLHttpRequest 封装、代码简单
  •  Vue、React 项目中都会用到 axios

2. 使用 XMLHttpRequest 对象

如何使用axios 

语法：

1. 引入 axios.js

  • 在线引入： https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js        --axios在线库
  • 本地引入：下载好axios文件，使用相对路径引入

2. 使用 axios 函数

axios 函数的基本结构

  • url

这个参数是必须的，里面填的是请求的url地址

  • method

这个参数是可选的，默认请求的是GET方法，参数内容不区分大小写

  • params

这个参数主要是替代以前的字符串拼接的方法，填在params里面的参数会以字符串拼接的方式，将参数凭借到url地址上。但这里会对参数值进行url编码

  • data

这个参数主要是用于接收请求体或者二进制参数，所以如果参数是表单数据或者二进制数据，需要使用data这个对象来接收

  • axios的回调处理--then()函数

这个函数主要是处理axios请求成功后返回的数据数据，里面接收一个回调函数

axios的回调处理--catch()函数

这个函数主要是处理axios请求失败后返回的数据数据，里面接收一个回调函数

axios 函数的使用场景

前提条件：成功的引入了js的依赖后

1 没有参数的情况
//场景1：无参数的请求
//不填请求方法参数，默认是GET请求axios({url: 'http://hmajax.itheima.net/api/province'}).then(function(result){//请求成功调用console.log(result);}).catch(function(error){//请求异常调用console.log(error);})

2 使用params参数传参的情况
//场景2：使用params参数的请求axios({url: 'http://hmajax.itheima.net/api/city',params: {pname: '辽宁省'}}).then(function(result){//请求成功调用console.log(result);}).catch(function(error){//请求异常调用console.log(error);})

使用箭头函数来替代匿名函数

3  使用data参数来处理请求体的数据

当请求方法是post方法时，参数会以请求体的方式向服务器提交

  // 场景3  使用data参数来处理请求体的数据axios({url: 'http://hmajax.itheima.net/api/register',method: 'post',data: {username: 'jack12345',password: '123456'}}).then(result=>{//请求成功调用console.log(result);}).catch(error=>{//请求异常调用console.log(error);})

4  上传图片等二进制的情况
  • 1. 获取图片文件对象
  • 2. 使用 FormData 携带图片文件
  • 3. 提交表单数据到服务器，使用图片 url 网址
<!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>Document</title></head>
<body><!-- 文件选择元素 --><input type="file" class="upload"><img src="" alt=""><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>//场景1：无参数的请求// axios({//   url: 'http://hmajax.itheima.net/api/province'// }).then(function(result){//   //请求成功调用//   console.log(result);// }).catch(function(error){//   //请求异常调用//   console.log(error);// })//场景2：使用params参数的请求//  axios({//   url: 'http://hmajax.itheima.net/api/city',//   params: {//     pname: '辽宁省'//   }// }).then(function(result){//   //请求成功调用//   console.log(result);// }).catch(function(error){//   //请求异常调用//   console.log(error);// })// // 场景3  使用data参数来处理请求体的数据// axios({//   url: 'http://hmajax.itheima.net/api/register',//   method: 'post',//   data: {//     username: 'jack12345',//     password: '123456'//   }// }).then(result=>{//   //请求成功调用//   console.log(result);// }).catch(error=>{//   //请求异常调用//   console.log(error);// })//4  上传图片等二进制的情况//1. 获取图片文件document.querySelector('.upload').addEventListener('change',(e)=>{//  console.log(e.target.files); //2. 使用 FormData 携带图片文件const fd = new FormData()// append()  追加元素fd.append('img',e.target.files[0])//使用ajax提交数据axios({url: 'http://hmajax.itheima.net/api/uploadimg',method: 'post',data: fd}).then(result=>{console.log(result);// console.log(result.data.data.url);document.querySelector('img').src = result.data.data.url}).catch(error=>{console.log(error);})})</script>
</body>
</html>

在日常的开发中基本大概是这四种常见的情况，学会用这几种，基本上可以解决问题

form-serialize 插件

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

使用：

  • 1 获取表单对象
  • 2 使用serialize函数，快速收集表单元素的值

<!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>13.form-serialize插件使用</title><script src="./lib/form-serialize.js"></script>
</head><body><form action="javascript:;" class="example-form"><input type="text" name="uname"><br><input type="text" name="pwd"><br><input type="button" class="btn" value="提交"></form><!-- 目标：在点击提交时，使用form-serialize插件，快速收集表单元素值--><script>//为提交按钮设置监听事件document.querySelector('.btn').addEventListener('click', () => {//使用插件快速获取表单元素值/*** 2. 使用serialize函数，快速收集表单元素的值* 参数1：要获取哪个表单的数据*  表单元素设置name属性，值会作为对象的属性名*  建议name属性的值，最好和接口文档参数名一致* 参数2：配置对象*  hash 设置获取数据结构*    - true：JS对象（推荐）一般请求体里提交给服务器*    - false: 查询字符串*  empty 设置是否获取空值*    - true: 获取空值（推荐）数据结构和标签结构一致*    - false：不获取空值*/const form = document.querySelector('.example-form')const data = serialize(form,{hash:true,empty:true})console.log(data);})</script>
</body></html>

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

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

相关文章

漫画图解 Go 并发编程之：Channel

漫画图解 Go 并发编程之：Channel

当谈到并发时&#xff0c;许多编程语言都采用共享内存/状态模型。然而&#xff0c;Go 通过实现 Communicating Sequential Processes&#xff08;CSP&#xff09;而与众不同。在 CSP 中&#xff0c;程序由不共享状态的并行处理器组成&#xff1b;相反&#xff0c;他们使用 Chan…
阅读更多...
基于Redis实现短信登录

基于Redis实现短信登录

首先我们要思考一下利用redis来存储数据&#xff0c;那么到底使用哪种结构呢&#xff1f;由于存入的数据比较简单&#xff0c;我们可以考虑使用String&#xff0c;或者是使用哈希&#xff0c;如下图&#xff0c;如果使用String&#xff0c;同学们注意他的value&#xff0c;用多…
阅读更多...
第4章 数据表示与特征工程

第4章 数据表示与特征工程

目录 1. 分类变量1.1 One-Hot编码&#xff08;虚拟变量&#xff09;检查字符串编码的分类数据 1.2 数字可以编码分类变量 2. 分箱、离散化、线性模型与树3. 交互特征与多相似特征4. 单变量非线性变换总结&#xff08;2~4&#xff09;5. 自动化特征选择5.1 单变量统计5.2 基于模…
阅读更多...
C语言菜鸟入门·判断语句（if语句、if...else语句、嵌套if语句）详细介绍

C语言菜鸟入门·判断语句（if语句、if...else语句、嵌套if语句）详细介绍

目录 1. if语句 2. if...else语句 3. if...else if...else 语句 4. 嵌套if语句 C 语言把任何非零和非空的值假定为 true&#xff0c;把零或 null 假定为 false。 语句描述if语句一个 if 语句 由一个布尔表达式后跟一个或多个语句组成。if...else语句一个 if 语句 后可跟…
阅读更多...
Unity3d实现简单的战斗

Unity3d实现简单的战斗

使用u3d实现一个简单的战斗demo&#xff0c;记下学到的知识点&#xff0c;以备后查。 1.判断是否点中指定物体 if (Input.GetMouseButton(0)) {Ray ray Camera.main.ScreenPointToRay(Input.mousePosition);if (Physics.Raycast(ray, out RaycastHit hit)){//坐标转换Vector…
阅读更多...
Flink问题解决及性能调优-【Flink rocksDB读写state大对象导致背压问题调优】

Flink问题解决及性能调优-【Flink rocksDB读写state大对象导致背压问题调优】

RocksDB是Flink中用于持久化状态的默认后端&#xff0c;它提供了高性能和可靠的状态存储。然而&#xff0c;当处理大型状态并频繁读写时&#xff0c;可能会导致背压问题&#xff0c;因为RocksDB需要从磁盘读取和写入数据&#xff0c;而这可能成为瓶颈。 遇到的问题 Flink开发…
阅读更多...
世微AP5125 LED外置MOS降压恒流驱动IC 12-36V 9V 1A驱动方案

世微AP5125 LED外置MOS降压恒流驱动IC 12-36V 9V 1A驱动方案

本品特点&#xff1a;宽输入电压范围&#xff1a;9V&#xff5e;100V ◆ 固定工作频率&#xff1a;140KHZ◆ 可设定电流范围&#xff1a;10mA&#xff5e;6000mA ◆ 内置抖频电路&#xff0c;降低对其他设备的 EMI 干扰◆ 平均电流模式采样&#xff0c;恒流精度更高◆ CS 电压…
阅读更多...
136832-63-8，活细胞示踪剂CMFDA(绿色)，5-氯甲基荧光素二醋酸酯，广泛应用于细胞追踪和标记实验中

136832-63-8，活细胞示踪剂CMFDA(绿色)，5-氯甲基荧光素二醋酸酯，广泛应用于细胞追踪和标记实验中

136832-63-8&#xff0c;活细胞示踪剂CMFDA(绿色)&#xff0c;5-氯甲基荧光素二醋酸酯&#xff0c;CellTracker Green CMFDA&#xff0c;可以用于基因表达分析等实验中&#xff0c;广泛应用于细胞追踪和标记实验中 您好&#xff0c;欢迎来到新研之家 文章关键词&#xff1a;1…
阅读更多...
c语言学习笔记之字符串库函数和逗号表达式

c语言学习笔记之字符串库函数和逗号表达式

逗号表达式 #include <stdio.h>int main(){int a 10;int b 5;int c 6;int d (a 23,b a-4,c b2);printf("%d",d); }打印结果为: 逗号表达式,从左往右依次进行,将最后一个表达式的值赋值给变量. c语言字符串相关库函数 求字符串长度strlen长度不受限制的…
阅读更多...
Qt开源版 vs 商业版 详细比较！！！！

Qt开源版 vs 商业版 详细比较！！！！

简单整理Qt开源版与商业版有哪些差别&#xff0c;仅供参考。 简单对比 开源版商业版许可证大部分采用对商业使用不友好的LGPLv3具备商业许可证保护代码专有许可证相关大部分模块使用LGPLv3和部分模块使用GPL组成仅第三方开源组件使用Qt的其他许可证Qt模块功能支持支持技术支持…
阅读更多...
海外云手机为什么吸引用户？

海外云手机为什么吸引用户？

近年来&#xff0c;随着全球化的飞速发展&#xff0c;海外云手机逐渐成为各行各业关注的焦点。那么&#xff0c;究竟是什么让海外云手机如此吸引用户呢&#xff1f;本文将深入探讨海外云手机的三大吸引力&#xff0c;揭示海外云手机的优势所在。 1. 高效的社交媒体运营 海外云…
阅读更多...
c#窗体捕捉方向键

c#窗体捕捉方向键

方法1 实现方法参考代码&#xff1a; private void Form1_Load(object sender, EventArgs e){this.KeyPreview true;}protected override bool ProcessDialogKey(Keys keyData){if (keyData Keys.Left || keyData Keys.Right || keyData Keys.Up || keyData Keys.Down){s…
阅读更多...
工程经验分享 Incremental FastPitch

工程经验分享 Incremental FastPitch

分享 NVIDIA 基于 GPU 的 TTS 解决方案介绍。 1. 基于 FastPitchHifi-GAN 的 Streaming TTS 效果优化 NVIDIA 在 TTS 领域也做了一些供大家参考的工作&#xff0c;例如提供了高效的流式 TTS 部署方案&#xff0c;利用 TensorRT 加速模型推理速度&#xff0c;并通过 Triton Inf…
阅读更多...
【软考- 系统集成项目管理工程师2】

【软考- 系统集成项目管理工程师2】

第一章-信息化知识-信息与信息化 今日座右铭&#xff1a;最好的偷懒方式&#xff0c;就是一次做好。 文章目录 第一章-信息化知识-信息与信息化前言一、信息1、信息的基本概念2、信息的传输模型3、信息的质量属性 二、信息系统1、系统的基本概念2、信息系统的生命周期 三、信息…
阅读更多...
IDEA 安装阿里Java编码规范插件

IDEA 安装阿里Java编码规范插件

1.File>Settings 2.安装之后重启 开发过程中如果有不符合规范的地方&#xff0c;会自动出现提示
阅读更多...
【C语言/数据结构】排序（归并排序|计数排序|排序算法复杂度）

【C语言/数据结构】排序（归并排序|计数排序|排序算法复杂度）

&#x1f308;个人主页&#xff1a;秦jh__https://blog.csdn.net/qinjh_?spm1010.2135.3001.5343&#x1f525; 系列专栏&#xff1a;《数据结构》https://blog.csdn.net/qinjh_/category_12536791.html?spm1001.2014.3001.5482 ​​​​ 目录 归并排序 代码实现&#xf…
阅读更多...
pin to pin替代TI DRV8872的GLOBALCHIP直流电机驱动芯片GC8872，低成本、宽电压，内置电荷泵，短地短电源保护，限流

pin to pin替代TI DRV8872的GLOBALCHIP直流电机驱动芯片GC8872，低成本、宽电压，内置电荷泵，短地短电源保护，限流

在现如今电机驱动芯片处于持续涨价的状态下&#xff0c;并且供货期货期长&#xff0c;偶尔缺货的状态下。为了降低设计成本&#xff0c;第一时间设计出优秀的产品占据市场高位。我这边推荐使用浙江GLOBALCHIP国产电机驱动芯片进行替换设计。供货稳定、价格低廉。GC8872是GLOBAL…
阅读更多...
Flink实战三_TableAPISQL

Flink实战三_TableAPISQL

接上文&#xff1a;Flink实战二_DataStream API 1、Table API和SQL是什么&#xff1f; 接下来理解下Flink的整个客户端API体系&#xff0c;Flink为流式/批量处理应用程序提供了不同级别的抽象&#xff1a; 这四层API是一个依次向上支撑的关系。 Flink API 最底层的抽象就是有…
阅读更多...
CSS之webkit内核中的属性text-stroke

CSS之webkit内核中的属性text-stroke

让我为大家介绍一下text-stroke 大家是否想过要弄一个描边过的文字&#xff0c;接下来&#xff0c;text-stroke就可以为你解决 text-stroke是一个复合属性&#xff0c;里面有两个参数&#xff1a;描边的尺寸 描边的颜色 <!DOCTYPE html> <html lang"en">…
阅读更多...
[AI]文心一言爆火的同时，ChatGPT带来了这么多的开源项目你了解吗

[AI]文心一言爆火的同时，ChatGPT带来了这么多的开源项目你了解吗

前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff1a;https://www.captainbed.cn/z ChatGPT体验地址 文章目录 前言4.5key价格泄漏ChatGPT4.0使用地址ChatGPT正确打开方式最新功能语音助手存档…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023