文章詳情頁(yè)
如何通過(guò)axios發(fā)起Ajax請(qǐng)求(最新推薦)
瀏覽：109日期：2022-06-12 08:21:05
目錄
- axios
- 什么是axios
- axios發(fā)起GET請(qǐng)求
- axios發(fā)起POST請(qǐng)求
- 直接使用axios發(fā)起get請(qǐng)求
- 直接使用axios發(fā)起post請(qǐng)求
axios
什么是axios
Axios是專注于網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求的庫(kù)，相比于原生的XMLHttpRequest對(duì)象，axios簡(jiǎn)單易用。相比于Jquery，axios更加輕量化，只專注于網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求。
axios發(fā)起GET請(qǐng)求
axios發(fā)起get請(qǐng)求的語(yǔ)法：
代碼
<body> <button id="btn1">發(fā)起get請(qǐng)求</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請(qǐng)求
axios發(fā)起post請(qǐng)求的語(yǔ)法
<button id="btn2">發(fā)起post請(qǐng)求</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請(qǐng)求
axios也提供了類似于Jquery中$.ajax()的函數(shù)，語(yǔ)法如下：
<body> <button id="btn3">發(fā)起ajax請(qǐng)求</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請(qǐng)求
<body> <button id="btn4">發(fā)起ajax post請(qǐng)求</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)于如何通過(guò)axios發(fā)起Ajax請(qǐng)求的文章就介紹到這了,更多相關(guān)axios發(fā)起Ajax請(qǐng)求內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！
標(biāo)簽：
Ajax
相關(guān)文章：
1. 爬取今日頭條Ajax請(qǐng)求2. PHP處理Ajax請(qǐng)求與Ajax跨域3. php判斷一個(gè)請(qǐng)求是ajax請(qǐng)求還是普通請(qǐng)求的方法4. ajax請(qǐng)求添加自定義header參數(shù)代碼5. 通過(guò)Ajax請(qǐng)求動(dòng)態(tài)填充頁(yè)面數(shù)據(jù)的實(shí)例6. AJAX請(qǐng)求以及解決跨域問(wèn)題詳解7. SpringBoot基于Shiro處理ajax請(qǐng)求代碼實(shí)例8. Java后臺(tái)判斷ajax請(qǐng)求及處理過(guò)程詳解9. php下的原生ajax請(qǐng)求用法實(shí)例分析10. Ajax引擎 ajax請(qǐng)求步驟詳細(xì)代碼
排行榜
網(wǎng)公網(wǎng)安備