站長(zhǎng)資訊網(wǎng)
方法：1、安裝并引入axios，用“axios([option])”、“axios.get(url[,…])”等方法發(fā)送請(qǐng)求。2、安裝并引入vue-resource，用“this.$http.jsonp(url,[…])”發(fā)送請(qǐng)求。
本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。
vue本身不支持發(fā)送AJAX請(qǐng)求，需要使用vue-resource、axios等插件實(shí)現(xiàn)。
axios是一個(gè)基于Promise的HTTP請(qǐng)求客戶端，用來發(fā)送請(qǐng)求，也是vue2.0官方推薦的，同時(shí)不再對(duì)vue-resource進(jìn)行更新和維護(hù)。
vuejs使用ajax的方法
1、安裝axios并引入
1）npm的方式： npm install axios -S
2）bower的方式： bower install axios
3）cdn的方式：<script src=”https://unpkg.com/axios/dist/axios.min.js”></script>
2、基本用法
1）axios([options])
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>axios發(fā)送ajax請(qǐng)求基本用法</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <button @click="send">發(fā)送ajax請(qǐng)求</button> </div> <script> new Vue({ el:"#app", methods:{ send(){ axios({ method:'get', url:'user.json' }).then(function(res){ console.log(res.data.name); }); } } }); </script> </body> </html>
2）axios.get(url[,options]);
傳參方式：
（1）通過url傳參axios(‘url?key=value&key1=val2’).then();
（2）通過params選項(xiàng)傳參 axios(‘url’,{params:{key:value}}).then();
3）axios.post(url,data,[options]);
axios默認(rèn)發(fā)送數(shù)據(jù)時(shí)，數(shù)據(jù)格式是Request Payload，并非常用的Form Data格式，
所以參數(shù)必須要以鍵值對(duì)形式傳遞，不能以json形式傳。
傳參方式：
（1）自己拼接為鍵值對(duì)
axios.post(‘url’,’key=value&key1=value1’).then();
（2）使用transformRequest，在請(qǐng)求發(fā)送前將請(qǐng)求數(shù)據(jù)進(jìn)行轉(zhuǎn)換
axios.post('url',data,{ transformRequest:[ function(data){ let params = ''; for(let index in data){ params +=index+'='+data[index]+'&'; } return params; } ] }).then(function(res){ console.log(res.data) });
（3）如果使用模塊化開發(fā)，可以使用qs模塊進(jìn)行轉(zhuǎn)換
axios本身并不支持發(fā)送跨域的請(qǐng)求，沒有提供相應(yīng)的API，作者也暫沒計(jì)劃在axios添加支持發(fā)送跨域請(qǐng)求，
所以只能使用第三方庫
跨域請(qǐng)求（使用vue-resource發(fā)送跨域請(qǐng)求）
1、使用vue-resource發(fā)送跨域請(qǐng)求步驟
- 安裝vue-resource并引入：npm install vue-resource -S
- 基本用法：
使用this.$http.jsonp(url,[ops]) 發(fā)送請(qǐng)求
2、基本使用演示（360搜索）
1）打開360搜索，然后輸入字符’a’會(huì)有一些搜索選項(xiàng)自動(dòng)提示，如圖 
2）復(fù)制鏈接
https://sug.so.#/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a
3）代碼演示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用vue-resource發(fā)送跨域請(qǐng)求</title> <!--引入vue、vue-resource文件--> <script src="vue.min.js"></script> <script src="vue-resource.min.js"></script> </head> <body> <div id="app"> <button @click="sendJsonp">send</button> </div> <script> var vm = new Vue({ el:"#app", methods:{ sendJsonp:function(){ this.$http.jsonp('https://sug.so.#/suggest',{ params:{ word:'a' } }).then(function(res){ console.log(res.data); }); } } }); </script> </body> </html>
4）結(jié)果
3、基本例子演示（百度搜索）
1）要求同360搜索的要求
2）復(fù)制鏈接
=1526436420943”>https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=1467_21117_20927&req=2&csor=1&cb=jQuery1102060305102784707_1526436420940&=1526436420943
3）代碼演示（注意）–第一次嘗試
如果按照上述代碼的方式去寫，那結(jié)果會(huì)報(bào)錯(cuò)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用vue-resource發(fā)送跨域請(qǐng)求</title> <!--引入vue、vue-resource文件--> <script src="vue.min.js"></script> <script src="vue-resource.min.js"></script> </head> <body> <div id="app"> <button @click="sendJsonp">send</button> </div> <script> var vm = new Vue({ el:"#app", methods:{ sendJsonp:function(){ this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ params:{ wd:'a' } }).then(function(res){ console.log(res.data); }); } } }); </script> </body> </html>
結(jié)果會(huì)報(bào)錯(cuò)
那這是為什么呢？
之前360搜索jsonp回調(diào)的參數(shù)名是callback，而百度使用的參數(shù)名為cb,所以會(huì)報(bào)錯(cuò)
修改過后的代碼如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用vue-resource發(fā)送跨域請(qǐng)求</title> <!--引入vue、vue-resource文件--> <script src="vue.min.js"></script> <script src="vue-resource.min.js"></script> </head> <body> <div id="app"> <button @click="sendJsonp">send</button> </div> <script> var vm = new Vue({ el:"#app", methods:{ sendJsonp:function(){ this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ params:{ wd:'a' }, jsonp:'cb' }).then(function(res){ console.log(res.data); }); } } }); </script> </body> </html>
4）結(jié)果
4、百度搜索案例演示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>百度搜索列表</title> <style> .current{ background-color:#CCCCCC; } </style> <!--引入vue、vue-resource文件--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.0"></script> </head> <body> <script> window.onload=function() { new Vue({ el: "#app", data: { keyword: '', myData:[], now: -1 }, methods: { getData(e) { //如果按方向鍵上、下，則不發(fā)請(qǐng)求 if (e.keyCode == 38 || e.keyCode == 40) return; this.$http.jsonp( 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', { params: { wd: this.keyword }, jsonp: 'cb' }).then(function (res) { console.log(res.data.s); this.myData = res.data.s; }); }, changeDown() { this.now++; this.keyword = this.myData[this.now]; if (this.now == this.myData.length) { this.now = -1; } }, changeUp() { this.now--; this.keyword = this.myData[this.now]; if (this.now == -2) { this.now = this.myData.length - 1; } } } }); } </script> <div id="app"> <input type="text" v-model="keyword" @keyup="getData($event)" @keydown.down="changeDown" @keydown.up.prevent="changeUp" /> <ul> <li v-for="(val,index) in myData" :key="index" :class="{current:index==now}" > {{val}} </li> </ul> </div> </body> </html>
