ajax实现查询（【Ajax】如何通过axios发起Ajax请求）

时间2025-04-30 05:52:19分类IT科技浏览9899

导读：✍️ 作者简介: 前端新手学习中。...

✍️ 作者简介: 前端新手学习中。

💂 作者主页: 作者主页查看更多前端教学

🎓 专栏分享：css重难点教学 Node.js教学从头开始学习 ajax学习

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>

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。