在原生HTML页面发起axios请求

在原生html页面发起axios请求,首先需要先引入axios文件包,然后按照axios的请求方式发起请求即可,但如果页面在本地,那么请求一般会报错跨域问题,需要部署一下才能正确请求数据;

例子

html 复制代码
<!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>

请求模板

javascript 复制代码
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);
     });

配置响应头

javascript 复制代码
axios({
    url: url,
    method: "GET",
    params: paramsdata,
    //响应头
    headers: {
       "Access-Control-Allow-Origin": "*",
    },
    }).then(function (res) {
       console.log("返回的结果", res.data);
    });
相关推荐
骑自行车的码农14 分钟前
React短文系列 遍历fiber树 App的创建
前端·react.js
AskSky17 分钟前
为了搞一个完美的健身APP,我真是费尽心机
前端
斯~内克23 分钟前
基于Vue.js和PDF-Lib的条形码生成与批量打印方案
前端·vue.js·pdf
阴阳怪气乌托邦24 分钟前
别再啃OA代码了!低代码"搭积木"式搞数智化,我直接少写500行
前端·低代码
beelan28 分钟前
v-on的思考
前端
山河木马31 分钟前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
用户92724725021931 分钟前
PHP + CSS + JS + JSON 数据采集与展示系统,支持伪静态
前端
努力只为躺平35 分钟前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
Web小助手37 分钟前
大保剑:Promise的有趣体验
javascript
李大玄37 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github