在原生HTML页面发起axios请求
在原生html页面发起axios请求,首先需要先引入axios文件包,然后按照axios的请求方式发起请求即可,但如果页面在本地,那么请求一般会报错跨域问题,需要部署一下才能正确请求数据;
例子
<!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><!-- 本地引入axios --><script src="000/axios-master/lib/axios.js"</script><!-- -->
</head>
<body><button id="btn">axios使用get提交数据</button><button id="btn1">axios使用post提交数据</button><button id="btn2">直接使用axios发送get提交数据</button><button id="btn3">直接使用axios发送post提交数据</button><script>var btn = document.querySelector("#btn");btn.addEventListener("click",function (params) {var url = "http://www.liulongbin.top:3006/api/get";var paramsobj = {name:'zs',age:20};axios.get(url,{params:paramsobj}).then(function (res) {var data = res.data;console.log(data);});});document.querySelector("#btn1").addEventListener("click",function (params) {var url = "http://www.liulongbin.top:3006/api/post";var dataobj = {location:'zs',address:'zs'};axios.post(url,{params:dataobj}).then(function (res) {console.log(res.data);});})document.querySelector("#btn2").addEventListener("click",function (params) {var url = "http://www.liulongbin.top:3006/api/get";var paramsdata = {name:'zss',age:20};axios({url:url,method:'GET',params:paramsdata}).then(function (res) {console.log(res.data);});});document.querySelector("#btn3").addEventListener("click",function (params) {var url = "http://www.liulongbin.top:3006/api/post";var paramsdataa = {name:'钢铁侠',age:35};axios({url:url,method:'POST',data:paramsdataa}).then(function (res) {console.log(res.data);});});</script>
</body>
</html>
请求模板
axios.get(url,{params:参数}).then(function(){//回调函数
});axios({url:url,method:'POST',//'GET'data:paramsdataa,//post保留params:paramsdataa,//get保留}).then(function (res) {console.log(res.data);});
配置响应头
axios({url: url,method: "GET",params: paramsdata,//响应头headers: {"Access-Control-Allow-Origin": "*",},}).then(function (res) {console.log("返回的结果", res.data);});
相关文章:
在原生HTML页面发起axios请求
在原生html页面发起axios请求,首先需要先引入axios文件包,然后按照axios的请求方式发起请求即可,但如果页面在本地,那么请求一般会报错跨域问题,需要部署一下才能正确请求数据; 例子 <!DOCTYPE html&g…...
重看工厂模式
重看工厂模式 之前整个设计模式的专栏是看了李建忠老师的视频,并没有太多的自己的总结,今天来回看一下设计模式,重温设计模式的魅力 工厂模式我们介绍三个: 简单工厂 工厂方法 抽象工厂 简单工厂 我们举个例子,…...
基于SpringBoot的SSMP整合案例(业务层基础开发与快速开发)
业务层基础开发 接口类public interface BookService {boolean save(Book book);boolean update(Book book);boolean delete(Integer id);Book getById(Integer id);List<Book> getAll();IPage<Book> getByPage(int currentPage,int pageSize);IPage<Book> …...
[Android]创建TabBar
创建一个包含“首页”、“分类”和“我的”选项卡的TabBar并实现切换功能,通常可以通过使用TabLayout结合ViewPager或ViewPager2来完成。以下是一个基本的示例,展示了如何使用Kotlin和XML来实现这个功能。 1.添加依赖项到build.gradle dependencies {/…...
UE5 UMG InvalidationBox和RetainerBox
作用:提高UMG运行效率 RetainerBox:需要手动刷新UMG渲染,节点RequestRender渲染 InvalidationBox:每间隔多帧渲染一次UMG...
HT16C23字段式驱动显示芯片替代PC16C23
1、概述 PC16C23是一款标准I2C接口通讯LCD控制/驱动芯片。该芯片提供1/4占空比和1/8占空比两种显示模式。1/4占空比模式最多驱动224点(56x4),1/8占空比模式最多驱动416(52x8)。 PC16C23内置时钟发生器、LCD偏置电压产生模块和LCD驱动电压跟…...
电力感知边缘计算网关产品设计方案-设计背景和设计思路
1.方案背景 未来新型电力系统将以新能源为发电主体,系统不确定性显著增强系统峰谷差逐年拉大,系统调峰、调频、稳定运行及安全控制等均面临前所未有的挑战,系统灵活性需求显著提升。而随着社会经济的发展,电动汽车充换电站、分布式储能、建筑、冰蓄冷空调等灵活资源正处在…...
Python武器库开发-flask篇之模板渲染(二十四)
flask篇之模板渲染(二十四) Flask 中的模板是一种将数据和 HTML 代码组合在一起的方式,使得我们可以生成动态的 HTML 页面。使用模板可以使我们的代码更加简洁、易于维护和复用。在真实的环境中,我们往往接触到的是由 html、CSS和JavaScript所做的网页&…...
pdb restore in ADG database
Effect of PITR on Dataguard Environment (Standby MRP Crashed with ORA-39873) (Doc ID 1591492.1)编辑To Bottom In this Document Symptoms Cause Solution APPLIES TO: Oracle Database Cloud Exadata Service - Version N/A and later Oracle Database Cloud Servic…...
科创人·蓝凌董事长杨健伟:夯实“四梁八柱”,让数字化“城中村上建高楼”
杨健伟 蓝凌软件董事长 长江商学院EMBA、数字化转型专家、深圳市企业联合会副会长、清华英赛克管理学博士。 “越来越多的企业家在谈数字化转型,软件行业需要思考CIO如何跟CEO对话,这是很大的挑战”,杨健伟在数智2023蓝凌用户大会上的这番话&…...
Flink SQL --Flink 整合 hive
1、整合 # 1、将依赖包上传到flink的lib目录下 flink-sql-connector-hive-3.1.2_2.12-1.15.2.jar# 2、重启flink集群 yarn application -list yarn application -kill application_1699579932721_0003 yarn-session.sh -d# 3、重新进入sql命令行 sql-client.sh 2、Hive cata…...
demo(一)eureka----服务注册与提供
下面写一个简单的demo验证下eureka,实现服务注册、服务发现。 一、单节点: 1、api: 封装其他组件需要共用的dto 2、eureka-service服务注册中心: (1)pom: <?xml version"1.0" encoding&q…...
core dump(介绍,status中的core dump标志,应用--调试),ulimit命令
目录 core dump(核心转储) 引入 介绍 core dump标志 引入 介绍 应用 -- gdb调试 注意点 ulimit命令 -a -c 示例 -- core file大小问题 core dump(核心转储) 引入 我们可以看到,不同的signal对应不同的编号和action:其中action主要分为term和coreterm就是终止的意…...
使用键盘管理器更改键盘快捷键,让键盘真正迎合你的使用习惯
如果默认快捷键不适合你,你肯定会想知道如何在Windows 11中更改键盘快捷键。 也许你已经习惯了macOS键盘,或者像我一样在Windows和Mac之间切换工作/游戏——如果是这样的话,重新配置默认的Windows快捷方式,使其与Mac上的快捷方式…...
putty保存登录账号和密码
putty作为一个免费的远程登录连接工具,其功能和性能还是很不错的,但是有一个很明显的缺点,就是无法保存用户名和密码。 在这里就针对这个问题,分享一种能够快速保存用户名和密码的方法。 1,创建一个桌面快捷方式。 …...
GRS认证是什么认证为何如此重要
在全球化日益盛行的今天,环保和可持续性成为了企业发展的关键词。其中,GRS认证作为企业实现可持续生产和全球环境保护的一个重要手段,越来越受到人们的关注。那么,GRS认证究竟是什么认证呢? GRS,全称为Global Rec…...
基于pytest-bdd的项目目录结构和命名规范
pytest-bdd 的文件的命名规范 pytest-bdd 是基于pytest 之上,所以需要遵循pytest 的命名规则才能进行测试,具体有: 测试文件名必须以*test.py或者test*.py命名测试函数必须以 test_开头 在pytest-bdd中存在两类文件: 以 .feat…...
web前端开发网页设计课堂作业/html练习《课程表》
目标图: 代码解析: 代码解析1<table border"3" align"center"><输入内容(的) 边界"3px" 位置"居中">2<tr><td colspan"7" align"center">课程表</td><t…...
用欧拉路径判断图同构推出reverse合法性:1116T4
http://cplusoj.com/d/senior/p/SS231116D 假设我们要把 a a a 变成 b b b,我们在 a i a_i ai 和 a i 1 a_{i1} ai1 之间连边, b b b 同理,则 a a a 能变成 b b b 的充要条件是两图 A , B A,B A,B 同构。 必要性显然࿰…...
高阶数据结构---树状数组
文章目录 楼兰图腾一个简单的整数问题 一个简单的整数问题2谜一样的牛 一、楼兰图腾OJ链接 二、一个简单的整数问题OJ链接 三、一个简单的整数问题2OJ链接 四、谜一样的牛OJ链接...
vscode里如何用git
打开vs终端执行如下: 1 初始化 Git 仓库(如果尚未初始化) git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...
TDengine 快速体验(Docker 镜像方式)
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能,本节首先介绍如何通过 Docker 快速体验 TDengine,然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker,请使用 安装包的方式快…...
循环冗余码校验CRC码 算法步骤+详细实例计算
通信过程:(白话解释) 我们将原始待发送的消息称为 M M M,依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)(意思就是 G ( x ) G(x) G(x) 是已知的)࿰…...
浪潮交换机配置track检测实现高速公路收费网络主备切换NQA
浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求,本次涉及的主要是收费汇聚交换机的配置,浪潮网络设备在高速项目很少,通…...
上位机开发过程中的设计模式体会(1):工厂方法模式、单例模式和生成器模式
简介 在我的 QT/C 开发工作中,合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式:工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...
FFmpeg avformat_open_input函数分析
函数内部的总体流程如下: avformat_open_input 精简后的代码如下: int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...
AD学习(3)
1 PCB封装元素组成及简单的PCB封装创建 封装的组成部分: (1)PCB焊盘:表层的铜 ,top层的铜 (2)管脚序号:用来关联原理图中的管脚的序号,原理图的序号需要和PCB封装一一…...
相关类相关的可视化图像总结
目录 一、散点图 二、气泡图 三、相关图 四、热力图 五、二维密度图 六、多模态二维密度图 七、雷达图 八、桑基图 九、总结 一、散点图 特点 通过点的位置展示两个连续变量之间的关系,可直观判断线性相关、非线性相关或无相关关系,点的分布密…...
如何把工业通信协议转换成http websocket
1.现状 工业通信协议多数工作在边缘设备上,比如:PLC、IOT盒子等。上层业务系统需要根据不同的工业协议做对应开发,当设备上用的是modbus从站时,采集设备数据需要开发modbus主站;当设备上用的是西门子PN协议时…...
CppCon 2015 学习:Reactive Stream Processing in Industrial IoT using DDS and Rx
“Reactive Stream Processing in Industrial IoT using DDS and Rx” 是指在工业物联网(IIoT)场景中,结合 DDS(Data Distribution Service) 和 Rx(Reactive Extensions) 技术,实现 …...
