溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“vue怎么發送ajax請求”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue怎么發送ajax請求”吧！
首頁安裝并引入axios
1、npm install axios -S #直接下載axios組件，下載完畢后axios.js就存放在node_modules\axios\dist中
2、網上直接下載axios.min.js文件
3、通過script src的方式進行文件的引入<script src="js/axios.min.js"></script>
axios基本使用方法
發送get請求
1、基本使用格式
格式1：axios([options]) #這種格式直接將所有數據寫在options里，options其實是個字典
格式2：axios.get(url[,options]);
2、傳參方式：
通過url傳參
通過params選項傳參
下面我們來看一個vue發送ajax get請求實例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>發送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('請求失敗：'+resp.status+','+resp.statusText);
});
},
sendGet(){
axios.get('server.php',{
params:{
name:'alice',
age:19
}
})
.then(resp => {
console.log(resp.data);
}).catch(err => { //
console.log('請求失敗：'+err.status+','+err.statusText);
});
},
}
});
}
</script>
</head>
<body>
<div id="itany">
<button @click="send">發送AJAX請求</button>
<button @click="sendGet">GET方式發送AJAX請求</button>
</div>
</body>
</html>發送post請求（push,delete的非get方式的請求都一樣）
1、基本使用格式
格式：axios.post(url,data,[options]);
2、傳參方式
1、自己拼接為鍵值對
2、使用transformRequest，在請求發送前將請求數據進行轉換
3、如果使用模塊化開發，可以使用qs模塊進行轉換
4、注釋：axios默認發送post數據時，數據格式是Request Payload，并非我們常用的Form Data格式，所以參數必須要以鍵值對形式傳遞，不能以json形式傳參
下面看是一個vue發送ajax post請求實例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>發送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
// }) //該方式發送數據是一個Request Payload的數據格式，一般的數據格式是Form Data格式，所有發送不出去數據
// axios.post('server.php','name=alice&age=20&') //方式1通過字符串的方式發送數據
axios.post('server.php',this.user,{ //方式2通過transformRequest方法發送數據，本質還是將數據拼接成字符串
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('請求失敗：'+err.status+','+err.statusText);
});
},
}
});
}
</script>
</head>
<body>
<div id="itany">
<button @click="send">發送AJAX請求</button>
<button @click="sendGet">GET方式發送AJAX請求</button>
</div>
</body>
</html>上面我們所介紹的vue發送ajax請求都是在同一域名下進行的也就是同域或者說是同源
那么vue如何發送跨域的ajax請求呢？
vue發送跨域ajax請求
1、須知：axios本身并不支持發送跨域的請求，沒有提供相應的API，作者也暫沒計劃在axios添加支持發送跨域請求，所以只能使用第三方庫
2、使用vue-resource發送跨域請求
3、 安裝vue-resource并引入
npm info vue-resource #查看vue-resource 版本信息
cnpm install vue-resource -S #等同于cnpm install vue-resource -save
4、基本使用方法（使用this.$http發送請求）
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搜索發送數據
<!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>發送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發送跨域ajax請求帶jsonp參數
<!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>發送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">向百度搜索發送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參數名為cb，所以需要修改,默認使用的是callbakc參數就不用修改
}).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具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。
感謝各位的閱讀，以上就是“vue怎么發送ajax請求”的內容了，經過本文的學習后，相信大家對vue怎么發送ajax請求這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
