文章詳情頁

如何通過axios發(fā)起Ajax請求(最新推薦)

瀏覽：385日期：2022-06-12 08:21:05

axios

什么是axios

Axios是專注于網(wǎng)絡(luò)數(shù)據(jù)請求的庫，相比于原生的XMLHttpRequest對象，axios簡單易用。相比于Jquery，axios更加輕量化，只專注于網(wǎng)絡(luò)數(shù)據(jù)請求。

axios發(fā)起GET請求

axios發(fā)起get請求的語法：

代碼

<body>    <button id="btn1">發(fā)起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發(fā)起POST請求

axios發(fā)起post請求的語法

 <button id="btn2">發(fā)起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發(fā)起get請求

axios也提供了類似于Jquery中$.ajax()的函數(shù)，語法如下：

<body>    <button id="btn3">發(fā)起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發(fā)起post請求

<body>    <button id="btn4">發(fā)起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>

到此這篇關(guān)于如何通過axios發(fā)起Ajax請求的文章就介紹到這了,更多相關(guān)axios發(fā)起Ajax請求內(nèi)容請搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！

Ajax

上一條：history保存列表頁ajax請求的狀態(tài)使用示例詳解下一條：原生Ajax之全面了解xhr的概念與使用

相關(guān)文章：

1. 淺析Django 接收所有文件,前端展示文件（包括視頻，文件，圖片）ajax請求2. 爬取今日頭條Ajax請求3. Fly攔截全局Ajax請求的方法4. history保存列表頁ajax請求的狀態(tài)使用示例詳解5. SpringBoot基于Shiro處理ajax請求代碼實例6. php下的原生ajax請求用法實例分析7. 使用FormData進行Ajax請求上傳文件的實例代碼8. layui Ajax請求給下拉框賦值的實例9. ajax請求后臺得到j(luò)son數(shù)據(jù)后動態(tài)生成樹形下拉框的方法10. AJAX請求數(shù)據(jù)及實現(xiàn)跨域的三種方法詳解

排行榜

					
					ASP.NET MVC使用Boostrap實現(xiàn)產(chǎn)品展示、查詢、排序、分頁
ASP.NET MVC使用JSAjaxFileUploader插件實現(xiàn)單文件上傳
使用ajax跨域調(diào)用springboot框架的api傳輸文件
利用Java實現(xiàn)串口全雙工通訊
Python dict的常用方法示例代碼
在vue中給后臺接口傳的值為數(shù)組的格式代碼
Docker數(shù)據(jù)備份恢復(fù)實現(xiàn)過程詳解
Java String不可變性實現(xiàn)原理解析
PHP腳本的10個技巧(8)
Python 實現(xiàn)自動化Excel報表的步驟
PHP數(shù)組操作詳細解釋
				