在原生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);
    });
相关推荐
灿灿1213812 分钟前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴30 分钟前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack1 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python
31535669131 小时前
一个简单的脚本,让pdf开启夜间模式
前端·后端
尘心cx1 小时前
前端-CSS-day1
前端·css
知否技术1 小时前
前端常说的 SCSS是个啥玩意?一篇文章给你讲的明明白白!
前端·scss
CN-Dust1 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
幼儿园技术家1 小时前
Uniapp简易使用canvas绘制分享海报
前端
开开心心就好2 小时前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑
全宝2 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css