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.rhkb.cn/news/249572.html

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

相关文章

【Python基础 机器学习】Python环境搭建（适合新手阅读的超详细教程）

【Python基础 机器学习】Python环境搭建（适合新手阅读的超详细教程）

&#x1f680;个人主页&#xff1a;为梦而生~ 关注我一起学习吧&#xff01; &#x1f4a1;重要专栏&#xff1a; 机器学习 &#xff1a;相对完整的机器学习基础教学&#xff01; 机器学习python实战&#xff1a;用python带你感受真实的机器学习 深度学习&#xff1a;现代人工智…
阅读更多...
【leetcode】20. 有效的括号

【leetcode】20. 有效的括号

有效的括号 题目链接 // 栈结构 typedef char valuetype; typedef struct {valuetype* arr;int top;int capacity; } Stack;void Init(Stack* stack);void Push(Stack* stack, valuetype value); void Pop(Stack* stack);valuetype Top(Stack* stack); int Size(Stack* stack…
阅读更多...
Elasticsearch：构建自定义分析器指南

Elasticsearch：构建自定义分析器指南

在本博客中&#xff0c;我们将介绍不同的内置字符过滤器、分词器和分词过滤器&#xff0c;以及如何创建适合我们需求的自定义分析器。更多关于分析器的知识&#xff0c;请详细阅读文章&#xff1a; 开始使用 Elasticsearch &#xff08;3&#xff09; Elasticsearch: analyzer…
阅读更多...
jenkins部署（docker）

jenkins部署（docker）

docker部署&#xff0c;避免安装tomcat 1.拉镜像 docker pull jenkins/jenkins2.宿主机创建文件夹 mkdir -p /lzp/jenkins_home chmod 777 /lzp/jenkins_home/3.启动容器 docker run -d -p 49001:8080 -p 49000:50000 --privilegedtrue -v /lzp/jenkins_home:/var/jenkins_…
阅读更多...
【HarmonyOS应用开发】ArkUI 开发框架-进阶篇-管理组件状态（九）

【HarmonyOS应用开发】ArkUI 开发框架-进阶篇-管理组件状态（九）

管理组件状态 一、概述 在应用中&#xff0c;界面通常都是动态的。下图所示&#xff0c;在子目标列表中&#xff0c;当用户点击目标一&#xff0c;目标一会呈现展开状态&#xff0c;再次点击目标一&#xff0c;目标一呈现收起状态。界面会根据不同的状态展示不一样的效果。 Ar…
阅读更多...
CapCut - 剪映国际版11.0.0

CapCut - 剪映国际版11.0.0

【应用名称】&#xff1a;CapCut - 剪映国际版 【适用平台】&#xff1a;#Android 【软件标签】&#xff1a;#CapCut #剪映国际版 【应用版本】&#xff1a;11.0.0 【应用大小】&#xff1a;231MB 【软件说明】&#xff1a;软件升级更新。目前大家广泛使用的最令人惊叹、最专业…
阅读更多...
NoSQL数据库简介

NoSQL数据库简介

NoSQL数据库简介 Brief Introduction to NoSQL Databases By JacksonML 1. 什么是SQL&#xff1f; 在了解NoSQL之前&#xff0c;先简要介绍一下SQL。 SQL是 Structured Query Language&#xff08;结构化查询语言&#xff09;的缩写。 SQL在关系型数据中广泛使用&#xf…
阅读更多...
shell - 免交互

shell - 免交互

一.Here Document 免交互 1. 交互的概念 交互&#xff1a;当计算机播放某多媒体程序的时候&#xff0c;编程人员可以发出指令控制该程序的运行&#xff0c;而不是程序单方面执行下去&#xff0c;程序在接受到编程人员相应的指令后而相应地做出反应。 对于Linux操作系统中&…
阅读更多...
Prometheus+grafana配置监控系统

Prometheus+grafana配置监控系统

使用docker compose安装 方便拓展, 配置信息都放在在 /docker/prometheus 目录下 1.目录结构如下 . ├── conf │ └── prometheus.yml ├── grafana_data ├── prometheus_data └── prometheus_grafana.yaml2.创建目录文件 mkdir /docker/prometheus &&am…
阅读更多...
2024 springboot Mybatis-flex 打包出错

2024 springboot Mybatis-flex 打包出错

Mybatis-flex官网&#xff1a;快速开始 - MyBatis-Flex 官方网站 从 Mybatis-flex官网获取模板后&#xff0c;加入自己的项目内容想打包确保错&#xff0c;先试试一下方法 这里改成skip的默认是true改成false&#xff0c;再次打包就可以了
阅读更多...
Unix环境高级编程-学习-04-匿名管道PIPE

Unix环境高级编程-学习-04-匿名管道PIPE

目录 一、环境 二、介绍 三、C标准函数介绍 1、pipe 2、popen 3、pclose 4、注意 四、宏 五、常见的管道用法 1、一对一&#xff08;父进程读子进程写一条管道&#xff09; 2、一对一&#xff08;父进程写子进程读一条管道&#xff09; 3、一对多&#xff08;父进程…
阅读更多...
Windows Qt C++ VTK 绘制三维曲线

Windows Qt C++ VTK 绘制三维曲线

Qt 自带数据可视化从文档上看&#xff0c;只能实现三维曲面。 QwtPlot3D在Qt6.6.0上没编译通过。 QCustomPlot 只能搞二维。 VTK~搞起。抄官网demo。 后续需求&#xff1a; 1、对数轴 2、Y轴逆序 3、Z轴值给色带&#xff0c;类似等高线图的色带 期待各位大佬多多指导。…
阅读更多...
vue前端页面时间显示问题解决方法

vue前端页面时间显示问题解决方法

解决方法&#xff0c; <template slot-scope"scope"><span>{{ parseTime(scope.row.boxClosingOnlineTime, {y}-{m}-{d} {h}:{i}:{s}) }}</span> </template> 刷新页面&#xff1a; 此外&#xff0c;使用JsonFormat(pattern "yyyy-M…
阅读更多...
C++ 哈希 开放定址法

C++ 哈希 开放定址法

哈希算法 哈希&#xff0c;是一种算法思想吗&#xff0c;它的核心是映射&#xff0c;哈希方法中使用的转换函数称为哈希(散列)函数&#xff0c;构造出来的结构称为哈希表(Hash Table)(或者称散列表) 在STL 中&#xff0c;提供了两个使用哈希底层实现的容器 unordered_set 和 …
阅读更多...
【C++干货铺】哈希结构在C++中的应用

【C++干货铺】哈希结构在C++中的应用

目录 unordered系列关联式容器 unordered_map unordered_map的接口说明 1.unordered_map的构造 2. unordered_map的容量 3. unordered_map的迭代器 4. unordered_map的元素访问 5. unordered_map的查询 6. unordered_map的修改操作 7. unordered_map的桶操作 底层结构 …
阅读更多...
【unity小技巧】FPS简单的射击换挡瞄准动画控制

【unity小技巧】FPS简单的射击换挡瞄准动画控制

文章目录 射击动画控制换弹动画瞄准动画完结 射击动画控制 换弹动画 调用 瞄准动画 问题&#xff1a;瞄准时&#xff0c;但是动画会卡住&#xff0c;不会播放瞄准的待机动画 修改 调用 动画如果太快可以去修改播放速度 播放速度变慢了&#xff0c;可能导致切换待机动画也…
阅读更多...
CS144--Chapter0--wsl2+docker环境搭建

CS144--Chapter0--wsl2+docker环境搭建

我的笔记本配置 荣耀magicbook16&#xff0c;容量是500G&#xff0c;芯片是R7-5800 由于笔记本容量较小&#xff0c;因此考虑这个方案&#xff0c;对于台式机用户&#xff0c;建议可以直接用虚拟机或者双系统。 前言 斯坦福官网给出的方法是用他们的镜像&#xff08;基于Ubu…
阅读更多...
Message Queue --- RabbitMQ

Message Queue --- RabbitMQ

MessageQueue Intro 什么是MQ为什么使用MQ常见的MQ 什么是MQ MQ全称是Message Queue&#xff0c;消息的队列&#xff0c;因为是队列&#xff0c;所以遵循FIFO 先进先出的原则&#xff0c;它是一种跨进程的通信机制&#xff0c;用于上下游传递消息。在互联网架构中&#xff0c;M…
阅读更多...
2024程序员的未来方向如何走？还看今朝

2024程序员的未来方向如何走？还看今朝

这几年的IT行业想必大家已经感受到了&#xff0c;Android、Java、前端等等程序员都经历了大厂裁员、小厂倒闭、找不到工作、毕业即失业的情况。大量失业是必然的&#xff0c;因为互联网公司都逐渐走向统一标准化&#xff0c;只剩下头部的一些大厂&#xff0c;所以市场需求少了。…
阅读更多...
Spring实现事务(一)

Spring实现事务(一)

Spring事务 .什么是事务事务的操作Spring中事务的实现准备工作创建表创建项目,引入Spring Web, Mybatis, mysql等依赖配置文件实体类 编程式事务(手动写代码操作事务)声明式事务(利用注解自动开启和提交事务) . 什么是事务 事务是⼀组操作的集合, 是⼀个不可分割的操作 在我们…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023