Ajax入门
文章目录
- axios体验
- axios-查询参数
- 常用请求方法
- 数据提交
- axios错误处理
axios体验
-
引入axios库
-
使用axios语法
axios({url: '目标资源地址' }).then((result)=>{// 对服务器返回的数据做后续处理 })
-
完整实例
<!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>AJAX概念和axios使用</title> </head><body> <!--axios库地址:https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js省份数据地址:http://hmajax.itheima.net/api/province目标: 使用axios库, 获取省份列表数据, 展示到页面上1. 引入axios库 --> <p class="my-p"></p> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script>// 2. 使用axios函数axios({url: 'http://hmajax.itheima.net/api/province'}).then(result=>{console.log(result)console.log(result.data.list)console.log(result.data.list.join('<br>'))// 把准备好省份列表,插入到页面document.querySelector('.my-p').innerHTML= result.data.list.join('<br>')}) </script> </body> </html> -
运行结果

axios-查询参数
- 语法:使用axios提供的params选项
axios({url: '目标资源地址',params:{参数名:值} }).then((result)=>{// 对服务器返回的数据做后续处理 }) - 注意:axios在运行时把参数名和值,会拼接到url
?参数名=值
-
demo
<!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>AJAX查询参数</title> </head><body> <!--axios库地址:https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js省份数据地址:http://hmajax.itheima.net/api/city目标: 使用axios库, 获取省份列表数据, 展示到页面上1. 引入axios库 --> <p class="my-p"></p> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script>// 2. 使用axios函数axios({url:'http://hmajax.itheima.net/api/city',// 查询参数params:{pname:'贵州省'}}).then((result)=>{console.log(result.data.list)document.querySelector('.my-p').innerHTML=result.data.list.join('<br>')}) </script> </body> </html> -
运行结果

常用请求方法
- 请求方法:对服务器资源,要执行的操作
请求方法 操作 GET 获取数据 POST 提交数据 PUT 修改数据(全部) DELETE 删除数据 PATCH 修改数据(部分)
数据提交
axios请求配置
- url:请求的URL地址
- method:请求的方法,GET可以省略不写(不区分大小写)
- data:提交的数据
axios({url: '目标资源地址',method:'请求方法',data:{参数名:值} }).then((result)=>{// 对服务器返回的数据做后续处理 })
axios错误处理
语法:在then方法的后面,通过点语法调用catch方法,传入回调函数并定义形参
axios({// 请求选项
}).then(result=>{// 处理数据
}).catch(error=>{// 处理错误
})
相关文章:
Ajax入门
文章目录 axios体验axios-查询参数常用请求方法数据提交 axios错误处理 axios体验 引入axios库 使用axios语法 axios({url: 目标资源地址 }).then((result)>{// 对服务器返回的数据做后续处理 })完整实例 <!DOCTYPE html> <html lang"en"><head&g…...
MapReduce基础原理、MR与MPP区别
MapReduce概述 MapReduce(MR)本质上是一种用于数据处理的编程模型;MapReduce用于海量数据的计算,HDFS用于海量数据的存储(Hadoop Distributed File System,Hadoop分布式文件系统)。Hadoop MapR…...
位运算符让人反胃
A60 B13 二进制下 A00111100 B00001101 &(同1为1) A00111100 & B00001101 X00001100 X12 |(有1为1) A00111100 | B00001101 X00111101 X61 ^(不同为1) A00111100 ^ B00001101 X00110001 X49 ~&…...
selenium环境搭建
文章目录 1、下载谷歌浏览器2、下载谷歌驱动 1、下载谷歌浏览器 浏览器下载完成后,在任务管理器中禁止浏览器的自动更新。因为驱动版本必须和浏览器一致,如果浏览器更新了,驱动就用不起了。 2、下载谷歌驱动 谷歌驱动需要和谷歌浏览器版本…...
Python-OpenCV中的图像处理-霍夫变换
Python-OpenCV中的图像处理-霍夫变换 霍夫变换霍夫直线变换霍夫圆环变换 霍夫变换 霍夫(Hough)变换在检测各种形状的技术中非常流行,如果要检测的形状可以用数学表达式描述,就可以是使用霍夫变换检测它。即使要检测的形状存在一点破坏或者扭曲也是可以使…...
最强自动化测试框架Playwright(10)- 截图
截图 捕获屏幕截图并将其保存到文件中: page.screenshot(path"screenshot.png")可将页面截图保存为screen.png import osfrom playwright.sync_api import Playwright, expect, sync_playwrightdef run(playwright: Playwright) -> None:browser p…...
SQL常见命令语句
1.连接数据库 mysql (-h IP) -u root -p 密码2.查看数据库 show databases3.使用数据库 use db_name4.查看表 show tables [from db_name]5.查看表结构 desc tb_name6.创建、删除、选择数据库 create database db_namedrop database db_nameuse db_name7.数据类型 参考链…...
Android Framework解析——WMS原理
作者:bobby_developer 1. WMS原理:WMS角色与实例化过程 window:它是一个抽象类,具体实现类为 PhoneWindow ,它对 View 进行管理。Window是View的容器,View是Window的具体表现内容; windowManager:是一个接…...
python编辑器安装与配置,python用哪个编辑器好用
大家好,给大家分享一下python编辑器pycharm安装教程,很多人还不知道这一点。下面详细解释一下。现在让我们来看看! 哪些python的编程软件值得推荐? 编写python源代码的软件.首推的Pycharm。 PyCharm用于bai一般IDE具备的功能&…...
如何使用ElasticSearch存储和查询数据
1. 引言 在大多数的场景里,存储数据都是用MySQL这类关系型数据库,这类数据库的特点是数据存储安全性和一致性高,可以用于事务操作,但是随着数据量的增加,查询的速度也会随之降低,并且其扩展能力有限&#x…...
谈谈对Spring MVC的理解
问题分析: SpringMVC 是一种基于 Java 语言开发,实现了 Web MVC 设计模式,请求驱动类型 的轻量级 Web 框架。 SpringMVC采用了 MVC 架构模式的思想,通过把 Model,View,Controller 分离,将 Web 层…...
Shopify平台Fulfillment业务模块升级
上图是销售订单、发货单与配送之间的关系图,销售订单可以创建多个发货单,多个发货单(不同销售订单)可以合并在一个配送订单进行发货 接口请求错误记录: 1. The api_client does not have the required permission(s). 2. Required parameter missing or…...
使用 PyTorch 逐步检测单个对象
一、说明 在对象检测任务中,我们希望找到图像中对象的位置。我们可以搜索一种类型的对象(单对象检测,如本教程所示)或多个对象(多对象检测)。通常,我们使用边界框定义对象的位置。有几种方法可以…...
Node.js |(二)Node.js API:fs模块 | 尚硅谷2023版Node.js零基础视频教程
学习视频:尚硅谷2023版Node.js零基础视频教程,nodejs新手到高手 文章目录 📚文件写入🐇writeFile 异步写入🐇writeFileSync 同步写入🐇appendFile / appendFileSync 追加写入🐇createWriteStrea…...
Android 13 Hotseat定制化修改——002 hotseat图标数量修改
目录 一.背景 二.实践方案 一.背景 由于需求是需要自定义修改Hotseat,所以此篇文章是记录如何自定义修改hotseat的,应该可以覆盖大部分场景,修改点有修改hotseat布局方向,hotseat图标数量,hotseat图标大小࿰…...
Flask实现接口mock,安装及使用教程(一)
1、什么是接口mock 主要是针对单元测试的应用,它可以很方便的解除单元测试中各种依赖,大大的降低了编写单元测试的难度 2、什么是mock server 正常情况下:测试客户端——测试——> 被测系统 ——依赖——>外部服务依赖 在被测系统和…...
分立式BUCK电路原理与制作持续更新
目录 一、分立式BUCK电路总体原理图 二、BUCK电路与LDO的区别 三、BUCK电路为什么要加电感 四、BUCK电路要加续流二极管 五、BUCK电路导通与断开的回路 六、电源公式的中的几个表示方式 1、输入功率用Pin表示 2、输出功率用Po表示 3、电源的效率公式:电源的…...
2023年大数据与计算国际会议 (WBDC 2023)| EI、Scoups检索
会议简介 Brief Introduction 2023年大数据与计算国际会议(WBDC 2023) 会议时间:2023年11月17 -19日 召开地点:中国西安 大会官网:www.iwbdc.org 2023年大数据与计算国际会议(WBDC 2023)将围绕“…...
Grafana V10 告警推送 邮件
最近项目建设完成,一个城域网项目,相关zabbix和grafana展示已经完,想了想,不想天天看平台去盯网络监控平台,索性对告警进行分类调整,增加告警的推送,和相关部门的提醒,其他部门看不懂…...
【OpenCV常用函数:视频捕获函数】cv2.VideoCapture
文章目录 1、cv2.VideoCapture() 1、cv2.VideoCapture() 输入视频路径,创建VideoCapture的对象 cv2.VideoCapture(filename) filename: 视频文件的路径视频名扩展名该类的函数有: 1)video.isOpened: 检查视频捕获是否成功 2)vid…...
大话软工笔记—需求分析概述
需求分析,就是要对需求调研收集到的资料信息逐个地进行拆分、研究,从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要,后续设计的依据主要来自于需求分析的成果,包括: 项目的目的…...
理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP? 模型控制协议 (MCP) 是一种创新的协议,旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议,它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
oracle与MySQL数据库之间数据同步的技术要点
Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异,它们的数据同步要求既要保持数据的准确性和一致性,又要处理好性能问题。以下是一些主要的技术要点: 数据结构差异 数据类型差异ÿ…...
如何将联系人从 iPhone 转移到 Android
从 iPhone 换到 Android 手机时,你可能需要保留重要的数据,例如通讯录。好在,将通讯录从 iPhone 转移到 Android 手机非常简单,你可以从本文中学习 6 种可靠的方法,确保随时保持连接,不错过任何信息。 第 1…...
如何在最短时间内提升打ctf(web)的水平?
刚刚刷完2遍 bugku 的 web 题,前来答题。 每个人对刷题理解是不同,有的人是看了writeup就等于刷了,有的人是收藏了writeup就等于刷了,有的人是跟着writeup做了一遍就等于刷了,还有的人是独立思考做了一遍就等于刷了。…...
Web后端基础(基础知识)
BS架构:Browser/Server,浏览器/服务器架构模式。客户端只需要浏览器,应用程序的逻辑和数据都存储在服务端。 优点:维护方便缺点:体验一般 CS架构:Client/Server,客户端/服务器架构模式。需要单独…...
手机平板能效生态设计指令EU 2023/1670标准解读
手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读,综合法规核心要求、最新修正及企业合规要点: 一、法规背景与目标 生效与强制时间 发布于2023年8月31日(OJ公报&…...
系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型
本文较长,建议点赞收藏,以免遗失。更多AI大模型应用开发学习视频及资料,尽在聚客AI学院。 本文通过代码驱动的方式,系统讲解PyTorch核心概念和实战技巧,涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...
加密通信 + 行为分析:运营商行业安全防御体系重构
在数字经济蓬勃发展的时代,运营商作为信息通信网络的核心枢纽,承载着海量用户数据与关键业务传输,其安全防御体系的可靠性直接关乎国家安全、社会稳定与企业发展。随着网络攻击手段的不断升级,传统安全防护体系逐渐暴露出局限性&a…...
用递归算法解锁「子集」问题 —— LeetCode 78题解析
文章目录 一、题目介绍二、递归思路详解:从决策树开始理解三、解法一:二叉决策树 DFS四、解法二:组合式回溯写法(推荐)五、解法对比 递归算法是编程中一种非常强大且常见的思想,它能够优雅地解决很多复杂的…...
