溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)vue中如何發(fā)送ajax請求，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
首頁安裝并引入axios
1、npm install axios -S #直接下載axios組件，下載完畢后axios.js就存放在node_modules\axios\dist中
2、網(wǎng)上直接下載axios.min.js文件
3、通過script src的方式進行文件的引入<script src="js/axios.min.js"></script>
axios基本使用方法
發(fā)送get請求
1、基本使用格式
格式1：axios([options]) #這種格式直接將所有數(shù)據(jù)寫在options里，options其實是個字典
格式2：axios.get(url[,options]);
2、傳參方式：
通過url傳參
通過params選項傳參
下面我們來看一個vue發(fā)送ajax get請求實例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>發(fā)送AJAX請求</title>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#itany',
data:{
user:{
name:'alice',
age:19
},
},
methods:{
send(){
axios({
method:'get',
url:'http://www.baidu.com?name=tom&age=23'
}).then(function(resp){
console.log(resp.data);
}).catch(resp => {
console.log('請求失?。?#39;+resp.status+','+resp.statusText);
});
},
sendGet(){
axios.get('server.php',{
params:{
name:'alice',
age:19
}
})
.then(resp => {
console.log(resp.data);
}).catch(err => { //
console.log('請求失?。?#39;+err.status+','+err.statusText);
});
},
}
});
}
</script>
</head>
<body>
<div id="itany">
<button @click="send">發(fā)送AJAX請求</button>
<button @click="sendGet">GET方式發(fā)送AJAX請求</button>
</div>
</body>
</html>發(fā)送post請求（push,delete的非get方式的請求都一樣）
1、基本使用格式
格式：axios.post(url,data,[options]);
2、傳參方式
1、自己拼接為鍵值對
2、使用transformRequest，在請求發(fā)送前將請求數(shù)據(jù)進行轉(zhuǎn)換
3、如果使用模塊化開發(fā)，可以使用qs模塊進行轉(zhuǎn)換
4、注釋：axios默認(rèn)發(fā)送post數(shù)據(jù)時，數(shù)據(jù)格式是Request Payload，并非我們常用的Form Data格式，所以參數(shù)必須要以鍵值對形式傳遞，不能以json形式傳參
下面看是一個vue發(fā)送ajax post請求實例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>發(fā)送AJAX請求</title>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#itany',
data:{
user:{
name:'alice',
age:19
},
},
methods:{
sendPost(){
// axios.post('server.php',{
// name:'alice',
// age:19
// }) //該方式發(fā)送數(shù)據(jù)是一個Request Payload的數(shù)據(jù)格式，一般的數(shù)據(jù)格式是Form Data格式，所有發(fā)送不出去數(shù)據(jù)
// axios.post('server.php','name=alice&age=20&') //方式1通過字符串的方式發(fā)送數(shù)據(jù)
axios.post('server.php',this.user,{ //方式2通過transformRequest方法發(fā)送數(shù)據(jù)，本質(zhì)還是將數(shù)據(jù)拼接成字符串
transformRequest:[
function(data){
let params='';
for(let index in data){
params+=index+'='+data[index]+'&';
}
return params;
}
]
})
.then(resp => {
console.log(resp.data);
}).catch(err => {
console.log('請求失?。?#39;+err.status+','+err.statusText);
});
},
}
});
}
</script>
</head>
<body>
<div id="itany">
<button @click="send">發(fā)送AJAX請求</button>
<button @click="sendGet">GET方式發(fā)送AJAX請求</button>
</div>
</body>
</html>上面我們所介紹的vue發(fā)送ajax請求都是在同一域名下進行的也就是同域或者說是同源
那么vue如何發(fā)送跨域的ajax請求呢？
vue發(fā)送跨域ajax請求
1、須知：axios本身并不支持發(fā)送跨域的請求，沒有提供相應(yīng)的API，作者也暫沒計劃在axios添加支持發(fā)送跨域請求，所以只能使用第三方庫
2、使用vue-resource發(fā)送跨域請求
3、 安裝vue-resource并引入
npm info vue-resource #查看vue-resource 版本信息
cnpm install vue-resource -S #等同于cnpm install vue-resource -save
4、基本使用方法（使用this.$http發(fā)送請求）
this.$http.get(url, [options])
this.$http.head(url, [options])
this.$http.delete(url, [options])
this.$http.jsonp(url, [options])
this.$http.post(url, [body], [options])
this.$http.put(url, [body], [options])
this.$http.patch(url, [body], [options])
下面再來看兩個實例
向360搜索發(fā)送數(shù)據(jù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>發(fā)送AJAX請求</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="js/vue-resource.js"></script>
</head>
<body>
<div id="itany">
<a>{{name}}</a>
<button v-on:click="send">sendJSONP</button>
</div>
</body>
<script>
new Vue({
el: '#itany',
data:{
name: 'alice',
age: 19
},
methods:{
send:function(){
// https://sug.so.#/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a
this.$http.jsonp('https://sug.so.#/suggest',
{params:{
word:'a'
}}
).then(function (resp) {
console.log(resp.data)
})
}
}
})
</script>
</html>vue發(fā)送跨域ajax請求帶jsonp參數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>發(fā)送AJAX請求</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="js/vue-resource.js"></script>
</head>
<body>
<div id="itany">
<button v-on:click="send">向百度搜索發(fā)送JSONP請求</button>
</div>
</body>
<script>
new Vue({
el:'#itany',
data:{
name:'za'
},
methods:{
send:function () {
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
{params:{wd:'a'},
jsonp:'cb', //百度使用的jsonp參數(shù)名為cb，所以需要修改,默認(rèn)使用的是callbakc參數(shù)就不用修改
}).then(function (resp) {
console.log(resp.data)
}).catch(function (err) {
console.log(err)
})
}
}
})
</script>
</html>Vue作為一個沒有入侵性的框架并不限制你使用ajax框架
使用了Vue后，ajax部分你可以做如下選擇：
1.使用JS原生XHR接口
2.引入JQuery或者Zepto 使用$.ajax();
3.Vue的github上提供了vue-resource插件 ：
4.使用 fetch.js
5.自己封裝一個ajax庫
上述就是小編為大家分享的vue中如何發(fā)送ajax請求了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼