在原生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);
    });
相关推荐
牧羊狼的狼2 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手3 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one3 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲3 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell4 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830945 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮5 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel6 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip6 小时前
JavaScript事件流
前端·javascript
CodeCraft Studio7 小时前
国产化Word处理组件Spire.DOC教程:使用 Python 将 Markdown 转换为 HTML 的详细教程
python·html·word·markdown·国产化·spire.doc·文档格式转换