如何通過(guò)axios發(fā)起Ajax請(qǐng)求(最新推薦)
目錄
axios
什么是axios
axios是專(zhuān)注于網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求的庫(kù)，相比于原生的xmlhttprequest對(duì)象，axios簡(jiǎn)單易用。相比于jquery，axios更加輕量化，只專(zhuān)注于網(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也提供了類(lèi)似于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)文章希望大家以后多多支持碩編程！
學(xué)習(xí)AJAX