【Ajax】如何通过axios发起Ajax请求
2023-03-31 10:40:36 时间
✍️ 作者简介: 前端新手学习中。
💂 作者主页: 作者主页查看更多前端教学
🎓 专栏分享: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>
相关文章
- 速度和性能狂卷,.NET 7有多少人买单
- 风云再续:他抖任他抖,IO诊断在我手
- 在开源社区的强烈抗议下 微软逆转了有争议的.NET变化
- Windows 11 的 Microsoft Store 上架 Visual Studio
- 微软:.NET 平台采用率的提升归功于开源
- 从文件下载视角来理解Web API
- 你以为的ASP.NET文件上传大小限制是你以为的吗
- 在Ubuntu中搭建.NET开发环境
- gRPC入门与实操(.NET篇)
- Rails MVC 和 CRUD(1)
- FANUC机器人PROFINET双通道板卡组态
- 网络IO
- 开源自己编写的半人工标注平台PaddleOCRLabel(.NET Winform版本)
- 还在死磕Ajax,不如看看Fetch ?
- 【ASP.NET Core】动态映射MVC路由
- 【ASP.NET Core】用配置文件来设置授权角色
- 【ASP.NET Core】按用户等级授权
- 【ASP.NET Core】自定义Session的存储方式
- 【ASP.NET Core】选项类的依赖注入
- 【ASP.NET Core】选项模式的相关接口