首页 前端知识 前端-axios应用在html文件

前端-axios应用在html文件

2024-08-15 23:08:39 前端知识 前端哥 162 335 我要收藏

axios介绍

axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

首先需要知道:axios不是一种新的技术。

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,有以下特点:

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

直接上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>axios在html中使用</title>
<!--    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>-->
    <script src="https://unpkg.com/axios/dist/axios.min.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>

</body>

<script>
    var btn = document.querySelector("#btn");
    btn.addEventListener("click",function (params) {
        var url = "http://localhost:5000/save";
        var paramsobj = {user:'zhangsan',pass: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://localhost:5000/save";
        var paramsdataa = {user:'zhangsan',pass:20};
        axios({
            url:url,
            method:'POST',
            data:paramsdataa
        }).then(function (res) {
            console.log(res.data);
        });
    });
</script>
</html>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15771.html
标签
评论
发布的文章

HTML5学习记录

2024-04-29 12:04:01

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!