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

Ajax入门与使用

news 2026/3/28 23:00:29

目录

◆ 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 上传图片等二进制的情况…...

编程日记 2024/2/2 7:21:48

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

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

编程日记 2024/2/2 7:18:45

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

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

编程日记 2024/2/2 7:12:40

Node.js 文件系统操作指南

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

编程日记 2024/2/2 7:10:38

Kotlin 协程1：深入理解withContext

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

编程日记 2024/2/2 7:07:35

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

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

编程日记 2024/2/2 7:06:34

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

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

编程日记 2024/2/2 7:04:33

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…...

编程日记 2024/2/2 7:03:32

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

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

编程日记 2024/2/2 7:02:31

轻松使用python将PDF转换为图片（成功）

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

编程日记 2024/2/2 7:01:30

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

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

编程日记 2024/2/2 6:59:28

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

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

编程日记 2024/2/2 6:56:25

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

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

编程日记 2024/2/2 6:55:24

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

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

编程日记 2024/2/2 6:54:24

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

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

编程日记 2024/2/2 6:52:22

桥接模式解析

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

编程日记 2024/2/2 6:51:19

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.案例…...

编程日记 2024/2/2 6:48:17

【Qt学习笔记】（一）初识Qt

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

编程日记 2024/2/2 6:45:13

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

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

编程日记 2024/2/2 6:41:09

消息队列的应用场景

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

编程日记 2024/2/2 6:40:08

终极macOS菜单栏管理指南：从杂乱到整洁的完美蜕变 [特殊字符]

终极macOS菜单栏管理指南&#xff1a;从杂乱到整洁的完美蜕变 &#x1f680; 【免费下载链接】Ice Powerful menu bar manager for macOS 项目地址: https://gitcode.com/GitHub_Trending/ice/Ice macOS菜单栏是每个苹果用户每天都要面对的重要界面&#xff0c;但随着安…...

编程新知 2026/3/28 21:58:00

创新型音乐收藏管理：用Listen1构建个人音乐生态的完整指南

创新型音乐收藏管理&#xff1a;用Listen1构建个人音乐生态的完整指南 【免费下载链接】listen1_chrome_extension one for all free music in china (chrome extension, also works for firefox) 项目地址: https://gitcode.com/gh_mirrors/li/listen1_chrome_extension …...

编程新知 2026/3/28 19:30:55

Umi-OCR：免费开源OCR工具的高效解决方案与全方位指南

Umi-OCR&#xff1a;免费开源OCR工具的高效解决方案与全方位指南 【免费下载链接】Umi-OCR Umi-OCR: 这是一个免费、开源、可批量处理的离线OCR软件&#xff0c;适用于Windows系统&#xff0c;支持截图OCR、批量OCR、二维码识别等功能。 项目地址: https://gitcode.com/GitHu…...

编程新知 2026/3/28 17:29:54

别再手动合并代码了！用Docker Compose 5分钟搞定Gitea私有Git服务器（附PostgreSQL配置）

5分钟极速搭建Gitea私有Git服务&#xff1a;Docker Compose与PostgreSQL黄金组合 还在用网盘同步代码&#xff1f;或是把项目文件夹压缩后通过聊天软件传来传去&#xff1f;作为经历过这些"原始管理方式"的开发者&#xff0c;我完全理解手动合并冲突时的崩溃感——上…...

编程新知 2026/3/28 17:05:36

七牛云CDN加速+HTTPS配置全攻略（阿里云域名解析实战）

七牛云CDN加速HTTPS配置全攻略&#xff08;阿里云域名解析实战&#xff09; 当你的网站访问速度开始影响用户体验&#xff0c;或是浏览器频繁弹出"不安全"警告时&#xff0c;CDN加速和HTTPS配置就成了刚需。七牛云作为国内领先的云服务商&#xff0c;提供了从存储到…...

编程新知 2026/3/28 16:07:07

技术数据解析 | CALCE圆柱电池数据集：SOC估计的OCV测试基准

1. CALCE圆柱电池数据集的核心价值 CALCE电池数据集由马里兰大学先进生命周期工程中心发布&#xff0c;是目前全球最权威的公开电池测试数据之一。这个数据集最吸引我的地方在于它提供了完整的实验环境记录和标准化的测试流程&#xff0c;这对于电池状态估计算法的开发简直是雪…...

编程新知 2026/3/28 15:16:56

nRF Connect扫描功能保姆级教程：从过滤广播数据到分析RSSI信号图，手把手教你精准定位蓝牙设备

nRF Connect扫描功能实战指南&#xff1a;从设备筛选到信号优化的全流程解析 当你面对展会现场上百个闪烁的蓝牙设备指示灯&#xff0c;或是实验室里数十个同型号的传感器节点时&#xff0c;如何快速锁定目标设备就像大海捞针。nRF Connect作为蓝牙开发者的瑞士军刀&#xff0c…...

编程新知 2026/3/28 14:54:48

告别海量标注！用Wav2Vec 2.0在10分钟语音数据上跑出可用ASR模型

极低资源语音识别实战&#xff1a;用Wav2Vec 2.0在10分钟数据上构建可用模型 当创业团队面临语音交互产品的原型开发时&#xff0c;最头疼的往往不是算法选择&#xff0c;而是标注数据匮乏的现实。传统语音识别方案需要数百小时的标注语音才能达到基本可用水平&#xff0c;而Wa…...

编程新知 2026/3/28 14:10:35

InstructPix2Pix解决修图难题：图片结构不崩，只改你想改的部分

InstructPix2Pix解决修图难题&#xff1a;图片结构不崩&#xff0c;只改你想改的部分 1. 颠覆传统的智能修图革命 想象一下&#xff1a;你有一张完美的旅行照片&#xff0c;但背景中的天气不尽如人意&#xff1b;或者一张专业人像&#xff0c;需要微调表情却不想重拍。传统修…...

编程新知 2026/3/28 14:02:34

终极指南：如何测试Binwalk自定义提取器：从单元测试到集成测试的完整方案

终极指南&#xff1a;如何测试Binwalk自定义提取器&#xff1a;从单元测试到集成测试的完整方案 【免费下载链接】binwalk Firmware Analysis Tool 项目地址: https://gitcode.com/gh_mirrors/bi/binwalk Binwalk 是一款强大的固件分析工具&#xff0c;专门用于识别和提…...

编程新知 2026/3/28 13:54:32