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

在原生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请求&#xff0c;首先需要先引入axios文件包&#xff0c;然后按照axios的请求方式发起请求即可&#xff0c;但如果页面在本地&#xff0c;那么请求一般会报错跨域问题&#xff0c;需要部署一下才能正确请求数据&#xff1b; 例子 <!DOCTYPE html&g…...

重看工厂模式

重看工厂模式 之前整个设计模式的专栏是看了李建忠老师的视频&#xff0c;并没有太多的自己的总结&#xff0c;今天来回看一下设计模式&#xff0c;重温设计模式的魅力 工厂模式我们介绍三个&#xff1a; 简单工厂 工厂方法 抽象工厂 简单工厂 我们举个例子&#xff0c;…...

基于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并实现切换功能&#xff0c;通常可以通过使用TabLayout结合ViewPager或ViewPager2来完成。以下是一个基本的示例&#xff0c;展示了如何使用Kotlin和XML来实现这个功能。 1.添加依赖项到build.gradle dependencies {/…...

UE5 UMG InvalidationBox和RetainerBox

作用&#xff1a;提高UMG运行效率 RetainerBox:需要手动刷新UMG渲染&#xff0c;节点RequestRender渲染 InvalidationBox:每间隔多帧渲染一次UMG...

HT16C23字段式驱动显示芯片替代PC16C23

1、概述 PC16C23是一款标准I2C接口通讯LCD控制/驱动芯片。该芯片提供1/4占空比和1/8占空比两种显示模式。1/4占空比模式最多驱动224点&#xff08;56x4)&#xff0c;1/8占空比模式最多驱动416&#xff08;52x8)。 PC16C23内置时钟发生器、LCD偏置电压产生模块和LCD驱动电压跟…...

电力感知边缘计算网关产品设计方案-设计背景和设计思路

1.方案背景 未来新型电力系统将以新能源为发电主体,系统不确定性显著增强系统峰谷差逐年拉大,系统调峰、调频、稳定运行及安全控制等均面临前所未有的挑战,系统灵活性需求显著提升。而随着社会经济的发展,电动汽车充换电站、分布式储能、建筑、冰蓄冷空调等灵活资源正处在…...

Python武器库开发-flask篇之模板渲染(二十四)

flask篇之模板渲染(二十四) Flask 中的模板是一种将数据和 HTML 代码组合在一起的方式&#xff0c;使得我们可以生成动态的 HTML 页面。使用模板可以使我们的代码更加简洁、易于维护和复用。在真实的环境中&#xff0c;我们往往接触到的是由 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、数字化转型专家、深圳市企业联合会副会长、清华英赛克管理学博士。 “越来越多的企业家在谈数字化转型&#xff0c;软件行业需要思考CIO如何跟CEO对话&#xff0c;这是很大的挑战”&#xff0c;杨健伟在数智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&#xff0c;实现服务注册、服务发现。 一、单节点&#xff1a; 1、api&#xff1a; 封装其他组件需要共用的dto 2、eureka-service服务注册中心&#xff1a; &#xff08;1&#xff09;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就是终止的意…...

使用键盘管理器更改键盘快捷键,让键盘真正迎合你的使用习惯

如果默认快捷键不适合你&#xff0c;你肯定会想知道如何在Windows 11中更改键盘快捷键。 也许你已经习惯了macOS键盘&#xff0c;或者像我一样在Windows和Mac之间切换工作/游戏——如果是这样的话&#xff0c;重新配置默认的Windows快捷方式&#xff0c;使其与Mac上的快捷方式…...

putty保存登录账号和密码

putty作为一个免费的远程登录连接工具&#xff0c;其功能和性能还是很不错的&#xff0c;但是有一个很明显的缺点&#xff0c;就是无法保存用户名和密码。 在这里就针对这个问题&#xff0c;分享一种能够快速保存用户名和密码的方法。 1&#xff0c;创建一个桌面快捷方式。 …...

GRS认证是什么认证为何如此重要

在全球化日益盛行的今天&#xff0c;环保和可持续性成为了企业发展的关键词。其中&#xff0c;GRS认证作为企业实现可持续生产和全球环境保护的一个重要手段&#xff0c;越来越受到人们的关注。那么&#xff0c;GRS认证究竟是什么认证呢?   GRS&#xff0c;全称为Global Rec…...

基于pytest-bdd的项目目录结构和命名规范

pytest-bdd 的文件的命名规范 pytest-bdd 是基于pytest 之上&#xff0c;所以需要遵循pytest 的命名规则才能进行测试&#xff0c;具体有&#xff1a; 测试文件名必须以*test.py或者test*.py命名测试函数必须以 test_开头 在pytest-bdd中存在两类文件&#xff1a; 以 .feat…...

web前端开发网页设计课堂作业/html练习《课程表》

目标图&#xff1a; 代码解析&#xff1a; 代码解析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&#xff0c;我们在 a i a_i ai​ 和 a i 1 a_{i1} ai1​ 之间连边&#xff0c; b b b 同理&#xff0c;则 a a a 能变成 b b b 的充要条件是两图 A , B A,B A,B 同构。 必要性显然&#xff0…...

高阶数据结构---树状数组

文章目录 楼兰图腾一个简单的整数问题 一个简单的整数问题2谜一样的牛 一、楼兰图腾OJ链接 二、一个简单的整数问题OJ链接 三、一个简单的整数问题2OJ链接 四、谜一样的牛OJ链接...

SEO优化对网站收录有什么作用

SEO优化对网站收录有什么作用 在当今互联网信息爆炸的时代&#xff0c;网站的收录问题显得尤为重要。SEO优化对于网站的收录有着至关重要的作用&#xff0c;无论是对于新开的网站还是已经运营一段时间的网站&#xff0c;优化都能为其带来更多的流量和潜在客户。SEO优化对网站收…...

小米智能家居跨区域协同控制技术指南

小米智能家居跨区域协同控制技术指南 【免费下载链接】ha_xiaomi_home Xiaomi Home Integration for Home Assistant 项目地址: https://gitcode.com/GitHub_Trending/ha/ha_xiaomi_home 随着智能家居设备数量的快速增长&#xff0c;多区域设备协同工作已成为提升居住体…...

【手把手教学】使用stitch 生成ui图,导入figma,再用codebuddy生成工程代码

目录 一.stich使用 1.1 关键词生成 1.2 生成ui图 1.3 导出figma​编辑 二. codebuddy使用 ​编辑2.1打开figma ​编辑 2.2 复制ui到设计面板 2.3生成工程代码 三. 结语 一.stich使用 stich官网地址 Google Stitch 是 Google Labs 推出的、基于 Gemini 大模型驱动的A…...

Python高效开发技巧汇总

这是一篇关于Python开发的技术文章示例内容&#xff0c;可以替换为真实文章内容。...

KOReader终极指南:如何打造你的完美电子墨水屏阅读体验

KOReader终极指南&#xff1a;如何打造你的完美电子墨水屏阅读体验 【免费下载链接】koreader An ebook reader application supporting PDF, DjVu, EPUB, FB2 and many more formats, running on Cervantes, Kindle, Kobo, PocketBook and Android devices 项目地址: https:…...

当今互联网安全的基石 - TLS/SSL

LS&#xff08;Transport Layer Security&#xff09;传输层安全协议 发展历程 TLS 是 SSL 协议的继任者。由于 SSL 协议存在一些安全漏洞&#xff0c;并且随着网络安全需求的不断提高&#xff0c;IETF&#xff08;Internet Engineering Task Force&#xff09;对 SSL 3.0 进…...

pg_textsearch:革新Postgres文本搜索的现代工具

【导语&#xff1a;GitHub上的pg_textsearch是一款适用于Postgres的现代排名文本搜索工具&#xff0c;具备简单语法、可配置参数等特性&#xff0c;目前已达v1.0.0版本可用于生产环境&#xff0c;对Postgres文本搜索领域带来新变革。】pg_textsearch&#xff1a;Postgres文本搜…...

C++手动实现共享智能指针my_shared_ptr|引用计数+删除器+完整可运行代码

1.共享智能指针的概念 共享型智能指针就是做出一个像JAVA中垃圾回收器,并且可以运用到所有资源,heap内存和系统资源都可以使用的系统。 shared_ptr实现了共享所有权(shared ownership)方式来管理资源对象,这意味没有一个特定的shared_ptr拥有资源对象。相反,这些指向同一…...

矩阵理论进阶:内积空间与正交变换的深度解析

1. 内积空间&#xff1a;从几何直觉到严格定义 第一次接触内积空间时&#xff0c;很多人会被各种抽象定义搞得晕头转向。其实我们可以从最熟悉的二维平面开始理解——当你计算两个向量的点积时&#xff0c;本质上是在测量它们的"相似程度"。这种几何直觉正是内积空间…...

SlimSAS连接器在高密度存储系统中的关键应用与优化策略

1. SlimSAS连接器为何成为高密度存储的"黄金搭档"&#xff1f; 第一次接触SlimSAS连接器是在去年部署全闪存阵列时。当时机柜里密密麻麻的线缆让我头疼不已&#xff0c;直到工程师拿出这个火柴盒大小的连接器&#xff0c;我才意识到高密度布线的革命真的来了。SlimS…...