如何通过axios发起Ajax请求(最新推荐)

 更新时间:2022年11月17日 09:24:59   作者:坚毅的小解同志  
Axios是专注于网络数据请求的库,相比于原生的XMLHttpRequest对象,axios简单易用。相比于Jquery,axios更加轻量化,只专注于网络数据请求,这篇文章主要介绍了如何通过axios发起Ajax请求,需要的朋友可以参考下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

axios  

什么是axios

Axios是专注于网络数据请求的库,相比于原生的XMLHttpRequest对象,axios简单易用。相比于Jquery,axios更加轻量化,只专注于网络数据请求。

axios发起GET请求

axios发起get请求的语法:

在这里插入图片描述


代码

<body>
    <button id="btn1">发起get请求</button>
    <script>
        document.querySelector('#btn1').addEventListener('click', function () {
            let url = 'http://www.liulongbin.top:3006/api/get';
            axios.get(url, { params: { name: 'xiaoxie', age: '20' } }).then(function (res) {
                console.log(res.data);
            })
        })
    </script>
</body>

在这里插入图片描述

axios发起POST请求

axios发起post请求的语法

在这里插入图片描述

 <button id="btn2">发起post请求</button>
  document.querySelector('#btn2').addEventListener('click', function () {
            let url = 'http://www.liulongbin.top:3006/api/post';
            axios.post(url, { name: 'xiaoxie', age: '20' }).then(function (res) {
                console.log(res.data);
            })
        })

在这里插入图片描述

直接使用axios发起get请求

axios也提供了类似于Jquery中$.ajax()的函数,语法如下:

在这里插入图片描述

<body>
    <button id="btn3">发起ajax请求</button>
    <script>
        document.getElementById('btn3').addEventListener('click', function () {
            let url = 'http://www.liulongbin.top:3006/api/get';
            let paramsData = {
                name: 'xiaoxie',
                age: 20
            }
            axios({
                method: 'get',
                url: url,
                params: paramsData,
            }).then(
                function (res) {
                    console.log(res.data);
                }
            )
        })
    </script>
</body>

在这里插入图片描述

直接使用axios发起post请求

<body>
    <button id="btn4">发起ajax post请求</button>
        document.getElementById('btn4').addEventListener('click', function () {
            let url = 'http://www.liulongbin.top:3006/api/post';
            let paramsData = {
                name: 'xiaoxie',
                age: 20
            }
            axios({
                method: 'post',
                url: url,
                data: paramsData,
            }).then(
                function (res) {
                    console.log(res.data);
                }
            )
        })
    </script>
</body>

在这里插入图片描述

到此这篇关于如何通过axios发起Ajax请求的文章就介绍到这了,更多相关axios发起Ajax请求内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!

相关文章

  • 完美解决ajax跨域请求下parsererror的错误

    完美解决ajax跨域请求下parsererror的错误

    下面小编就为大家带来一篇完美解决ajax跨域请求下parsererror的错误。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • ajax提交数据到后台php接收(实现方法)

    ajax提交数据到后台php接收(实现方法)

    下面小编就为大家带来一篇ajax提交数据到后台php接收(实现方法)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • AJAX开发技术在PHP开发中的简单应用技巧

    AJAX开发技术在PHP开发中的简单应用技巧

    AJAX无疑是2005年炒的最热的Web开发技术之一,当然,这个功劳离不开Google。我只是一个普通开发者,使用AJAX的地方不是特别多,我就简单的把我使用的心得说一下。(本文假设用户已经具有JavaScript、HTML、CSS等基本的Web开发能力)
    2010-04-04
  • ajax实现的提交文章前进行敏感词审核的代码

    ajax实现的提交文章前进行敏感词审核的代码

    在做“文章敏感词汇审核”功能的时候,开始在把“审核”放在插入数据库的时候,后来想有一个功能,能在用户点击“提交”按钮的时候,给一个提示。这样相对“友好”那么点。
    2010-02-02
  • 深入浅析Jsonp解决ajax跨域问题

    深入浅析Jsonp解决ajax跨域问题

    这篇文章主要介绍了深入浅析Jsonp解决ajax跨域问题的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-05-05
  • AJAX实践DWR篇

    AJAX实践DWR篇

    这篇文章主要介绍了AJAX实践DWR篇
    2006-09-09
  • AjaxSubmit()提交file文件

    AjaxSubmit()提交file文件

    这篇文章主要介绍了AjaxSubmit()提交file文件的实例讲解,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • Ajax读取txt并对txt内容进行分页显示功能

    Ajax读取txt并对txt内容进行分页显示功能

    这篇文章给大家介绍了Ajax读取txt并对txt内容进行分页显示功能,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-11-11
  • ajax视频课件 在线观看地址

    ajax视频课件 在线观看地址

    ajax视频课件 在线观看地址...
    2007-05-05
  • Ajax全局加载框(Loading效果)的配置

    Ajax全局加载框(Loading效果)的配置

    这篇文章主要介绍了Ajax全局加载框(Loading效果)的配置的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07

最新评论

?


http://www.vxiaotou.com