当前位置: 首页 > news >正文

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>

相关文章:

Ajax入门与使用

目录 ◆ AJAX 概念和 axios 使用 什么是 AJAX&#xff1f; 怎么发送 AJAX 请求&#xff1f; 如何使用axios axios 函数的基本结构 axios 函数的使用场景 1 没有参数的情况 2 使用params参数传参的情况 3 使用data参数来处理请求体的数据 4 上传图片等二进制的情况…...

蓝桥杯备战——11.NE555测频

1.分析原理图 我们可以看到&#xff0c;上图就是一个NE555构建的方波发生电路&#xff0c;输出方波频率1.44/2(R8Rb3)C,如果有不懂NE555内部结构&#xff0c;工作原理的&#xff0c;可以到B站学习。实在不懂仿真也行&#xff0c;比如我下面就是仿真结果&#xff1a; 然后就是下…...

代码随想录算法训练营第三十三天|509. 斐波那契数 ,● 70. 爬楼梯 , 746. 使用最小花费爬楼梯

确定dp数组&#xff08;dp table&#xff09;以及下标的含义确定递推公式dp数组如何初始化确定遍历顺序举例推导dp数组 代码随想录 视频&#xff1a;从此再也不怕动态规划了&#xff0c;动态规划解题方法论大曝光 &#xff01;| 理论基础 |力扣刷题总结| 动态规划入门_哔哩哔哩…...

Node.js 文件系统操作指南

文章目录 Node.js 文件系统操作完全指南一、引言二、基本文件操作2.1 读取文件2.2 写入文件2.3 追加内容到文件 三、文件与目录的创建与删除3.1 创建文件3.2 创建目录3.3 删除文件3.4 删除目录 四、文件与目录的信息查询4.1 检查文件或目录是否存在4.2 获取文件信息4.3 获取目录…...

Kotlin 协程1:深入理解withContext

Kotlin 协程1&#xff1a;深入理解withContext 引言 在现代编程中&#xff0c;异步编程已经变得非常重要。在 Kotlin 中&#xff0c;协程提供了一种优雅和高效的方式来处理异步编程和并发。在这篇文章中&#xff0c;我们将深入探讨 Kotlin 协程中的一个重要函数&#xff1a;wi…...

(自用)learnOpenGL学习总结-高级OpenGL-几何着色器

在顶点着色器和片段着色器中间还有一个几何着色器。 几何着色器的输入是一个图元的一组顶点&#xff0c;在几何着色器中进行任意变换之后再给片段着色器&#xff0c;可以变成完全不一样的图元、可以生成更多的顶点。 #version 330 core layout (points) in; layout (line_str…...

坚持刷题 | 完全二叉树的节点个数

Hello&#xff0c;大家好&#xff0c;我是阿月&#xff01;坚持刷题&#xff0c;老年痴呆追不上我&#xff0c;今天刷&#xff1a;完全二叉树的节点个数 题目 222.完全二叉树的节点个数 代码实现 class TreeNode {int val;TreeNode left, right;public TreeNode(int val) …...

K8S网络

一、介绍 k8s不提供网络通信&#xff0c;提供了CNI接口(Container Network Interface&#xff0c;容器网络接口)&#xff0c;由CNI插件实现完成。 1.1 Pod通信 1.1.1 同一节点Pod通信 Pod通过虚拟Ethernet接口对&#xff08;Veth Pair&#xff09;与外部通信&#xff0c;Veth…...

【蓝桥杯51单片机入门记录】LED

目录 一、基础 &#xff08;1&#xff09;新建工程 &#xff08;2&#xff09;编写前准备 二、LED &#xff08;1&#xff09;点亮LED灯 &#xff08;2&#xff09;LED闪烁 延时函数的生成&#xff08;stc-isp中生成&#xff09; 实现 &#xff08;3&#xff09;流水灯…...

轻松使用python将PDF转换为图片(成功)

使用PyMuPDF&#xff08;fitz&#xff09;将PDF转换为图片 在处理PDF文件时&#xff0c;我们经常需要将PDF页面转换为图片格式&#xff0c;以便于在网页、文档或应用程序中显示。Python提供了多种方式来实现这一需求&#xff0c;本文将介绍如何使用PyMuPDF&#xff08;也称为f…...

【目标检测】对DETR的简单理解

【目标检测】对DETR的简单理解 文章目录 【目标检测】对DETR的简单理解1. Abs2. Intro3. Method3.1 模型结构3.2 Loss 4. Exp5. Discussion5.1 二分匹配5.2 注意力机制5.3 方法存在的问题 6. Conclusion参考 1. Abs 两句话概括&#xff1a; 第一个真正意义上的端到端检测器最…...

[工具探索]Safari 和 Google Chrome 浏览器内核差异

最近有些Vue3的项目&#xff0c;使用了safari进行测试环境搞开发&#xff0c;发现页面存在不同程序的页面乱码情况&#xff0c;反而google浏览器没问题&#xff0c;下面我们就对比下他们之间的差异点&#xff1a; 日常开发google chrome占多数&#xff1b;现在主流浏览器 Goog…...

文本生成高清、连贯视频,谷歌推出时空扩散模型

谷歌研究人员推出了创新性文本生成视频模型——Lumiere。 与传统模型不同的是&#xff0c;Lumiere采用了一种时空扩散&#xff08;Space-time&#xff09;U-Net架构&#xff0c;可以在单次推理中生成整个视频的所有时间段&#xff0c;能明显增强生成视频的动作连贯性&#xff…...

时隔3年 | 微软 | Windows Server 2025 重磅发布

最新功能 以下是微软产品团队正在努力的方向&#xff1a; Windows Server 2025 为所有人提供的热补丁下一代 AD 活动目录和 SMB数据与存储Hyper-V 和人工智能还有更多… Ignite 发布视频 Windows Server 2025 Ignite Video 介绍 Windows Server 2022 正式发布日期是2021年…...

有趣的css - 动态的毛玻璃背景

页面效果 此效果主要使用 backdrop-filter 属性&#xff0c;以及配合 animation 属性来实现毛玻璃模糊和一些动效。 此效果可适用于登录窗口&#xff0c;网站背景或者一些卡片列表中&#xff0c;使网页更具科技感和空间感。 核心代码部分&#xff0c;简要说明了写法思路&#x…...

桥接模式解析

回调设计模式 意图 回调是指一段可以执行的代码&#xff0c;该代码会被作为参数传递给其他代码&#xff0c;在适当的时候&#xff0c;预期这部分代码将会被调用执行。 解释 案例&#xff1a;我们需要在执行完任务后得到通知。为此&#xff0c;我们会向执行器传递一个回调方法…...

MySQL数据库基础第一篇(SQL通用语法与分类)

文章目录 一、SQL通用语法二、SQL分类三、DDL语句四、DML语句1.案例代码2.读出结果 五、DQL语句1.DQL-基本查询2.DQL-条件查询3.DQL-聚合函数4.DQL-分组查询5.DQL-排序查询6.DQL-分页查询7.DQL语句-执行顺序1.案例代码2.读出结果 六、DCL语句1.DCL-管理用户2.DCL-权限控制1.案例…...

【Qt学习笔记】(一)初识Qt

Qt学习笔记 1 使用Qt Creator 新建项目2 项目代码解释3 创建第一个 Hello World 程序4 关于内存泄漏问题5 Qt 中的对象树6 关于 qDebug&#xff08;&#xff09;的使用7 使用其他方式创建一个 Hello World 程序&#xff08;编辑框和按钮方式&#xff09;8 关于 Qt 中的命名规范…...

YIA主题如何关闭新版本升级提示?WordPress主题怎么取消升级提醒?

前两天YIA主题发布了升级到2.8版本&#xff0c;新增了一些功能&#xff0c;优化调整修复了一些功能&#xff0c;但是这些功能调整幅度不大&#xff0c;加上boke112百科使用的YIA主题已经进行了很多方面的个性化修改&#xff0c;所以就懒得升级了&#xff0c;但是每次进入WordPr…...

消息队列的应用场景

消息队列的应用场景 消息队列中间件是分布式系统中重要的组件&#xff0c;主要解决应用耦合&#xff0c;异步消息&#xff0c;流量削锋等问题实现高性能&#xff0c;高可用&#xff0c;可伸缩和最终一致性架构使用较多的消息队列有ActiveMQ&#xff0c;RabbitMQ&#xff0c;Ze…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

Vue 模板语句的数据来源

&#x1f9e9; Vue 模板语句的数据来源&#xff1a;全方位解析 Vue 模板&#xff08;<template> 部分&#xff09;中的表达式、指令绑定&#xff08;如 v-bind, v-on&#xff09;和插值&#xff08;{{ }}&#xff09;都在一个特定的作用域内求值。这个作用域由当前 组件…...

消防一体化安全管控平台:构建消防“一张图”和APP统一管理

在城市的某个角落&#xff0c;一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延&#xff0c;滚滚浓烟弥漫开来&#xff0c;周围群众的生命财产安全受到严重威胁。就在这千钧一发之际&#xff0c;消防救援队伍迅速行动&#xff0c;而豪越科技消防一体化安全管控平台构建的消防“…...