Vue通過(guò)axios發(fā)送ajax請(qǐng)求基礎(chǔ)演示
在Vue中是不支持發(fā)送ajax請(qǐng)求的，如果我們要在Vue中發(fā)送ajax請(qǐng)求，我們需借助第三方插件
常用發(fā)送ajax請(qǐng)求插件有兩個(gè) vue-resource和axios,Vue.js 2.0 版本推薦使用 axios 來(lái)完成 ajax 請(qǐng)求。
axios項(xiàng)目源碼 https://github.com/axios/axios
axios引入方式
npm方式： npm install axios
bower方式 bower install axios
yarn方式 yarn add axios
CDN方式<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios基本使用
axios發(fā)送簡(jiǎn)單get請(qǐng)求
//1.php
<?php
echo 123;
//html
<div id='app'>
<input type="button" @click='get' value='get' name="">
<input type="button" @click='post' value='post' name="">
<input type="button" @click='jsonp' value='jsonp' name="">
</div>
//js
<script type="text/javascript">
var vm = new Vue({
el:'#app',
methods:{
get(){
axios.get('1.php').then(res=>{
console.log(res);
})
}
}
})
</script>
then后面的匿名函數(shù)為請(qǐng)求成功的回調(diào)函數(shù)
打印結(jié)果如下
axios get傳參
1.直接寫(xiě)在url后面
var vm = new Vue({
el:'#app',
methods:{
get(){
axios.get('1.php?id=1&name="測(cè)試"').then(res=>{
console.log(res);
})
}
}
})
2.通過(guò)params參數(shù)
var vm = new Vue({
el:'#app',
methods:{
get(){
axios.get('1.php',{params:{
id:1,
name:'測(cè)試'
}}).then(res=>{
console.log(res);
})
}
}
})
axios發(fā)送post請(qǐng)求
axios({
method: 'post',
url: '1.php',
params: {
firstName: 'Fred',
lastName: 'Flintstone'
},
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
},
}).then(function(res){
console.log(res)
})
注意：直接使用axiox發(fā)送post請(qǐng)求時(shí)，會(huì)使后端接收不到數(shù)據(jù)
解決方法如下
一，在發(fā)送post請(qǐng)求時(shí)我們要手動(dòng)設(shè)置請(qǐng)求頭
Content-Type:application/x-www-form-urlencoded并且我們將傳遞參數(shù)的屬性data換成了params，使用data發(fā)送數(shù)據(jù)，后端接收不到
二，使用data發(fā)送數(shù)據(jù)時(shí)，我們可以在數(shù)據(jù)發(fā)送之前進(jìn)行數(shù)據(jù)轉(zhuǎn)換轉(zhuǎn)換為key=value&key2=value2…的形式
axios({
url: '1.php',
method: 'post',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
},
//數(shù)據(jù)轉(zhuǎn)換
transformRequest:[data=>{
let res = ''
for (let item in data){
res +=item + "="+data[item]+"&";
}
return res;
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(function(res){
console.log(res)
})
以上就是Vue通過(guò)axios發(fā)送ajax請(qǐng)求基礎(chǔ)演示的詳細(xì)內(nèi)容，更多關(guān)于Vue通過(guò)axios發(fā)送ajax請(qǐng)求的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue-element-admin搭建后臺(tái)管理系統(tǒng)的實(shí)現(xiàn)步驟
本文主要介紹了vue-element-admin搭建后臺(tái)管理系統(tǒng)的實(shí)現(xiàn)步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
Vue和relation-graph庫(kù)打造高質(zhì)量的關(guān)系圖應(yīng)用程序
這篇文章主要介紹了Vue和relation-graph庫(kù)打造高質(zhì)量的關(guān)系圖應(yīng)用程序,在這篇文章中,我們深入探討了如何使用Vue和relation-graph高效打造關(guān)系圖,我們?cè)敿?xì)介紹了數(shù)據(jù)準(zhǔn)備、關(guān)系映射、點(diǎn)擊事件等關(guān)鍵步驟,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue-cli3.x + axios 跨域方案踩坑指北，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
基于Vue?+?ElementUI實(shí)現(xiàn)可編輯表格及校驗(yàn)
這篇文章主要給大家介紹了基于Vue?+?ElementUI?實(shí)現(xiàn)可編輯表格及校驗(yàn),文中有詳細(xì)的代碼講解和實(shí)現(xiàn)思路,講解的非常詳細(xì),有需要的朋友可以參考下2023-08-08
Vue項(xiàng)目打包壓縮的實(shí)現(xiàn)(讓頁(yè)面更快響應(yīng))
這篇文章主要介紹了Vue項(xiàng)目打包壓縮的實(shí)現(xiàn)(讓頁(yè)面更快響應(yīng)),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了vue無(wú)限輪播插件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了vue制作一個(gè)toast組件npm包,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
如何測(cè)量vue應(yīng)用運(yùn)行時(shí)的性能
這篇文章主要介紹了如何測(cè)量vue應(yīng)用運(yùn)行時(shí)的性能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了詳解vue文件中使用echarts.js的兩種方式，主要介紹了兩種使用方式，一種是以組件的形式另一種直接引入，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-10-10
遇到vue前端npm?i報(bào)錯(cuò)多個(gè)版本不一致問(wèn)題及解決
這篇文章主要介紹了遇到vue前端npm?i報(bào)錯(cuò)多個(gè)版本不一致問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03