前端-axios应用在html文件

最新推荐文章于 2024-06-07 16:07:04 发布

大卫软件测试

最新推荐文章于 2024-06-07 16:07:04 发布

阅读量641

点赞数 3

分类专栏：大卫前端总结文章标签：前端 html

本文链接：https://blog.csdn.net/qadnkz/article/details/136707474

版权

大卫前端总结专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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>

大卫软件测试

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端-axios应用在html文件

axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。首先需要知道：axios不是一种新的技术。axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，有以下特点：从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求。
复制链接

扫一扫