在原生HTML页面发起axios请求

最新推荐文章于 2024-07-25 11:52:08 发布

发渐稀

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量2.9k

点赞数

分类专栏： JavaScript 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_64760783/article/details/134437911

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在原生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);
    });

发渐稀

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
在原生HTML页面发起axios请求

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

扫一扫

专栏目录