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

Ajax入门与使用

news 2026/2/11 0:58:05

目录

◆ 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

云计算——弹性云计算器（ECS）

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

编程新知 2025/8/16 21:50:27

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/11/20 18:42:48

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

编程新知 2025/10/5 8:09:39

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2026/2/1 13:28:03

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/11/25 22:59:17

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

编程新知 2025/12/17 5:54:30

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

编程新知 2025/10/18 7:13:10

C++.OpenGL （10/64）基础光照（Basic Lighting）

基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

编程新知 2026/1/20 2:37:04

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

编程新知 2025/12/25 18:03:56