vue中axios實(shí)現(xiàn)數(shù)據(jù)交互與跨域問(wèn)題
1. 通過(guò)axios實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求
vue.js默認(rèn)沒(méi)有提供ajax功能的。
所以使用vue的時(shí)候，一般都會(huì)使用axios的插件來(lái)實(shí)現(xiàn)ajax與后端服務(wù)器的數(shù)據(jù)交互。
注意，axios本質(zhì)上就是javascript的ajax封裝，所以會(huì)被同源策略限制。
下載地址：
https://unpkg.com/axios@0.18.0/dist/axios.js
https://unpkg.com/axios@0.18.0/dist/axios.min.js
axios提供發(fā)送請(qǐng)求的常用方法有兩個(gè)：axios.get() 和 axios.post() 。
增 post
刪 delete
改 put
查 get
// 發(fā)送get請(qǐng)求
// 參數(shù)1: 必填，字符串，請(qǐng)求的數(shù)據(jù)接口的url地址，例如請(qǐng)求地址：http://www.baidu.com?id=200
// 參數(shù)2：可選，json對(duì)象，要提供給數(shù)據(jù)接口的參數(shù)
// 參數(shù)3：可選，json對(duì)象，請(qǐng)求頭信息
axios.get('服務(wù)器的資源地址',{ // http://www.baidu.com
params:{
參數(shù)名:'參數(shù)值', // id: 200,
}
}).then(function (response) { // 請(qǐng)求成功以后的回調(diào)函數(shù)
console.log("請(qǐng)求成功");
console.log(response);
}).catch(function (error) { // 請(qǐng)求失敗以后的回調(diào)函數(shù)
console.log("請(qǐng)求失敗");
console.log(error.response);
});
// 發(fā)送post請(qǐng)求，參數(shù)和使用和axios.get()一樣。
// 參數(shù)1: 必填，字符串，請(qǐng)求的數(shù)據(jù)接口的url地址
// 參數(shù)2：必填，json對(duì)象，要提供給數(shù)據(jù)接口的參數(shù),如果沒(méi)有參數(shù)，則必須使用{}
// 參數(shù)3：可選，json對(duì)象，請(qǐng)求頭信息
axios.post('服務(wù)器的資源地址',{
username: 'xiaoming',
password: '123456'
},{
responseData:"json",
})
.then(function (response) { // 請(qǐng)求成功以后的回調(diào)函數(shù)
console.log(response);
})
.catch(function (error) { // 請(qǐng)求失敗以后的回調(diào)函數(shù)
console.log(error);
});
// b'firstName=Fred&lastName=Flintstone'
1.1 json
json是 JavaScript Object Notation 的首字母縮寫(xiě)，單詞的意思是javascript對(duì)象表示法，這里說(shuō)的json指的是類(lèi)似于javascript對(duì)象的一種數(shù)據(jù)格式。
json的作用：在不同的系統(tǒng)平臺(tái)，或不同編程語(yǔ)言之間傳遞數(shù)據(jù)。
1.1.1 json數(shù)據(jù)的語(yǔ)法
json數(shù)據(jù)對(duì)象類(lèi)似于JavaScript中的對(duì)象，但是它的鍵對(duì)應(yīng)的值里面是沒(méi)有函數(shù)方法的，值可以是普通變量，不支持undefined，值還可以是數(shù)組或者json對(duì)象。
// json數(shù)據(jù)的對(duì)象格式：
{
"name":"tom",
"age":18
}
// json數(shù)據(jù)的數(shù)組格式：
["tom",18,"programmer"]
復(fù)雜的json格式數(shù)據(jù)可以包含對(duì)象和數(shù)組的寫(xiě)法。
{
"name":"小明",
"age":200,
"fav":["code","eat","swim","read"],
"son":{
"name":"小小明",
"age":100,
"lve":["code","eat"],
}
}
// 數(shù)組結(jié)構(gòu)也可以作為json傳輸數(shù)據(jù)。
json數(shù)據(jù)可以保存在.json文件中，一般里面就只有一個(gè)json對(duì)象。
總結(jié)：
1. json文件的后綴是.json
2. json文件一般保存一個(gè)單一的json數(shù)據(jù)
3. json數(shù)據(jù)的屬性不能是方法或者undefined，屬性值只能：數(shù)值、字符串、json和數(shù)組
4. json數(shù)據(jù)只使用雙引號(hào)、每一個(gè)屬性成員之間使用逗號(hào)隔開(kāi)，并且最后一個(gè)成員沒(méi)有逗號(hào)。
{
"name":"小明",
"age":200,
"fav":["code","eat","swim","read"],
"son":{
"name":"小小明",
"age":100
}
}
工具：postman可以用于測(cè)試開(kāi)發(fā)的數(shù)據(jù)接口。
1.1.2 js中提供的json數(shù)據(jù)轉(zhuǎn)換方法
javascript提供了一個(gè)JSON對(duì)象來(lái)操作json數(shù)據(jù)的數(shù)據(jù)轉(zhuǎn)換.
| 方法 | 參數(shù) | 返回值 | 描述 |
|---|---|---|---|
| stringify | json對(duì)象 | 字符串 | json對(duì)象轉(zhuǎn)成字符串 |
| parse | 字符串 | json對(duì)象 | 字符串格式的json數(shù)據(jù)轉(zhuǎn)成json對(duì)象 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// json語(yǔ)法
let humen = {
"username":"xiaohui",
"password":"1234567",
"age":20
};
console.log(humen);
console.log(typeof humen);
// JSON對(duì)象提供對(duì)json格式數(shù)據(jù)的轉(zhuǎn)換功能
// stringify(json對(duì)象) # 用于把json轉(zhuǎn)換成字符串
let result = JSON.stringify(humen);
console.log(result);
console.log(typeof result);
// parse(字符串類(lèi)型的json數(shù)據(jù)) # 用于把字符串轉(zhuǎn)成json對(duì)象
let json_str = '{"password":"1123","age":20,"name":"xiaobai"}';
console.log(json_str)
console.log(typeof json_str)
let json_obj = JSON.parse(json_str);
console.log(json_obj);
console.log(typeof json_obj)
console.log(json_obj.age)
</script>
</body>
</html>
1.2 ajax
ajax，一般中文稱之為："阿賈克斯"，是英文 “Async Javascript And Xml”的簡(jiǎn)寫(xiě)，譯作：異步j(luò)s和xml數(shù)據(jù)傳輸數(shù)據(jù)。
ajax的作用： ajax可以讓js代替瀏覽器向后端程序發(fā)送http請(qǐng)求，與后端通信，在用戶不知道的情況下操作數(shù)據(jù)和信息，從而實(shí)現(xiàn)頁(yè)面局部刷新數(shù)據(jù)/無(wú)刷新更新數(shù)據(jù)。
所以開(kāi)發(fā)中ajax是很常用的技術(shù)，主要用于操作后端提供的數(shù)據(jù)接口，從而實(shí)現(xiàn)網(wǎng)站的前后端分離。
ajax技術(shù)的原理是實(shí)例化js的XMLHttpRequest對(duì)象，使用此對(duì)象提供的內(nèi)置方法就可以與后端進(jìn)行數(shù)據(jù)通信。
1.2.1 數(shù)據(jù)接口
數(shù)據(jù)接口，也叫api接口，表示后端提供操作數(shù)據(jù)/功能的url地址給客戶端使用。
客戶端通過(guò)發(fā)起請(qǐng)求向服務(wù)端提供的url地址申請(qǐng)操作數(shù)據(jù)【操作一般：增刪查改】
同時(shí)在工作中，大部分?jǐn)?shù)據(jù)接口都不是手寫(xiě)，而是通過(guò)函數(shù)庫(kù)/框架來(lái)生成。
1.2.3 ajax的使用
ajax的使用必須與服務(wù)端程序配合使用，但是目前我們先學(xué)習(xí)ajax的使用，所以暫時(shí)先不涉及到服務(wù)端python代碼的編寫(xiě)。因此，我們可以使用別人寫(xiě)好的數(shù)據(jù)接口進(jìn)行調(diào)用。
jQuery將ajax封裝成了一個(gè)函數(shù)$.ajax()，我們可以直接用這個(gè)函數(shù)來(lái)執(zhí)行ajax請(qǐng)求。
| 接口 | 地址 |
|---|---|
| 天氣接口 | http://wthrcdn.etouch.cn/weather_mini?city=城市名稱 |
| 音樂(lè)接口搜索 | http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=歌曲標(biāo)題 |
| 音樂(lè)信息接口 | http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.song.play&songid=音樂(lè)ID |
編寫(xiě)代碼獲取接口提供的數(shù)據(jù)：
jQ版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
$("#btn").on("click",function(){
$.ajax({
// 后端程序的url地址
url: 'http://wthrcdn.etouch.cn/weather_mini',
// 也可以使用method，提交數(shù)據(jù)的方式，默認(rèn)是'GET'，常用的還有'POST'
type: 'get',
dataType: 'json', // 返回的數(shù)據(jù)格式，常用的有是'json','html',"jsonp"
data:{ // 設(shè)置發(fā)送給服務(wù)器的數(shù)據(jù)，如果是get請(qǐng)求，也可以寫(xiě)在url地址的?后面
"city":'北京'
}
})
.done(function(resp) { // 請(qǐng)求成功以后的操作
console.log(resp);
})
.fail(function(error) { // 請(qǐng)求失敗以后的操作
console.log(error);
});
});
})
</script>
</head>
<body>
<button id="btn">點(diǎn)擊獲取數(shù)據(jù)</button>
</body>
</html>
vue版本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="city">
<button @click="get_weather">點(diǎn)擊獲取天氣</button>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
city:"",
},
methods:{
get_weather(){
// http://wthrcdn.etouch.cn/weather_mini?city=城市名稱
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
.then(response=>{
console.log(response);
}).catch(error=>{
console.log(error.response)
});
}
}
})
</script>
</body>
</html>
總結(jié)：
1. 發(fā)送ajax請(qǐng)求，要通過(guò)$.ajax()，參數(shù)是對(duì)象，里面有固定的參數(shù)名稱。
$.ajax({
"url":"數(shù)據(jù)接口url地址",
"method":"http請(qǐng)求方式，前端只支持get和post",
"dataType":"設(shè)置服務(wù)器返回的數(shù)據(jù)格式，常用的json，html，jsonp，默認(rèn)值就是json",
// 要發(fā)送給后端的數(shù)據(jù)參數(shù)，post時(shí)，數(shù)據(jù)必須寫(xiě)在data，get可以寫(xiě)在data,也可以跟在地址欄?號(hào)后面
"data":{
"數(shù)據(jù)名稱":"數(shù)據(jù)值",
}
}).then(function(resp){ // ajax請(qǐng)求數(shù)據(jù)成功時(shí)會(huì)自動(dòng)調(diào)用then方法的匿名函數(shù)
console.log( resp ); // 服務(wù)端返回的數(shù)據(jù)
}).fail(function(error){ // ajax請(qǐng)求數(shù)據(jù)失敗時(shí)會(huì)自動(dòng)調(diào)用fail方法的匿名函數(shù)
console.log( error );
});
2. ajax的使用往往配合事件/鉤子操作進(jìn)行調(diào)用。
jQuery還提供了$.get 和 $post簡(jiǎn)寫(xiě)$.ajax的操作。
// 發(fā)送get請(qǐng)求
// 參數(shù)1：數(shù)據(jù)接口的請(qǐng)求地址
// 參數(shù)2：發(fā)送給接口地址的數(shù)據(jù)參數(shù)
// 參數(shù)3：ajax請(qǐng)求成功以后，調(diào)用的匿名函數(shù)，匿名函數(shù)的第一個(gè)參數(shù)還是服務(wù)端返回的數(shù)據(jù)
// 參數(shù)4：設(shè)置服務(wù)端返回的數(shù)據(jù)格式，告訴給jQuery
$.get("test.php", { "func": "getNameAndTime" },
function(data){
alert(data.name); // John
console.log(data.time); // 2pm
}, "json");
// 發(fā)送post請(qǐng)求
// 參數(shù)1：數(shù)據(jù)接口的請(qǐng)求地址
// 參數(shù)2：發(fā)送給接口地址的數(shù)據(jù)參數(shù)
// 參數(shù)3：ajax請(qǐng)求成功以后，調(diào)用的匿名函數(shù)，匿名函數(shù)的第一個(gè)參數(shù)還是服務(wù)端返回的數(shù)據(jù)
// 參數(shù)4：設(shè)置服務(wù)端返回的數(shù)據(jù)格式，告訴給jQuery
$.post("test.php", { "func": "getNameAndTime" },
function(data){
alert(data.name); // John
console.log(data.time); // 2pm
}, "json");
1.2.4 同源策略
同源策略，是瀏覽器為了保護(hù)用戶信息安全的一種安全機(jī)制。所謂的同源就是指代通信的兩個(gè)地址（例如服務(wù)端接口地址與瀏覽器客戶端頁(yè)面地址）之間比較，是否協(xié)議、域名(IP)和端口相同。不同源的客戶端腳本[javascript]在沒(méi)有明確授權(quán)的情況下，沒(méi)有權(quán)限讀寫(xiě)對(duì)方信息。
ajax本質(zhì)上還是javascript，是運(yùn)行在瀏覽器中的腳本語(yǔ)言，所以會(huì)被受到瀏覽器的同源策略所限制。
| 前端地址：http://www.oldboy.cn/index.html | 是否同源 | 原因 |
|---|---|---|
| http://www.oldboy.cn/user/login.html | 是 | 協(xié)議、域名、端口相同 |
| http://www.oldboy.cn/about.html | 是 | 協(xié)議、域名、端口相同 |
| https://www.oldboy.cn/user/login.html | 否 | 協(xié)議不同 ( https和http ) |
| http:/www.oldboy.cn:5000/user/login.html | 否 | 端口 不同( 5000和80) |
| http://bbs.oldboy.cn/user/login.html | 否 | 域名不同 ( bbs和www ) |
同源策略針對(duì)ajax的攔截，代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<div id="app">
<button @click="get_music">點(diǎn)擊獲取天氣</button>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{},
methods:{
get_music(){
axios.get("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=我的中國(guó)心")
.then(response=>{
console.log(response);
}).catch(error=>{
console.log(error.response)
});
}
}
})
</script>
</body>
</html>
上面代碼運(yùn)行錯(cuò)誤如下：
Access to XMLHttpRequest at 'http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=%E6%88%91%E7%9A%84%E4%B8%AD%E5%9B%BD%E5%BF%83' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
上面錯(cuò)誤，關(guān)鍵詞：Access-Control-Allow-Origin
只要出現(xiàn)這個(gè)關(guān)鍵詞，就是訪問(wèn)受限。出現(xiàn)同源策略的攔截問(wèn)題。
1.2.5 ajax跨域(跨源)方案之CORS
CORS是一個(gè)W3C標(biāo)準(zhǔn)，全稱是"跨域資源共享"，它允許瀏覽器向跨源的后端服務(wù)器發(fā)出ajax請(qǐng)求，從而克服了AJAX只能同源使用的限制。
實(shí)現(xiàn)CORS主要依靠后端服務(wù)器中響應(yīng)數(shù)據(jù)中設(shè)置響應(yīng)頭信息返回的。
django的視圖
def post(request):
response = new Response()
response .set_header("Access-Control-Allow-Origin","*")
return response;
// 在響應(yīng)行信息里面設(shè)置以下內(nèi)容：
Access-Control-Allow-Origin: ajax所在的域名地址
Access-Control-Allow-Origin: www.oldboy.cn # 表示只允許www.oldboy.cn域名的客戶端的ajax跨域訪問(wèn)
// * 表示任意源，表示允許任意源下的客戶端的ajax都可以訪問(wèn)當(dāng)前服務(wù)端信息
Access-Control-Allow-Origin: *
總結(jié)：
0. 同源策略：瀏覽器的一種保護(hù)用戶數(shù)據(jù)的一種安全機(jī)制。
瀏覽器會(huì)限制腳本語(yǔ)法不能跨源訪問(wèn)其他源的數(shù)據(jù)地址。
同源：判斷兩個(gè)通信的地址之間，是否協(xié)議，域名[IP]，端口一致。
ajax： http://127.0.0.1/index.html
api數(shù)據(jù)接口： http://localhost/index
這兩個(gè)是同源么？不是同源的。是否同源的判斷依據(jù)不會(huì)根據(jù)電腦來(lái)判斷，而是通過(guò)協(xié)議、域名、端口的字符串是否來(lái)判斷。
1. ajax默認(rèn)情況下會(huì)受到同源策略的影響，一旦受到影響會(huì)報(bào)錯(cuò)誤如下：
No 'Access-Control-Allow-Origin' header is present on the requested resource
2. 解決ajax只能同源訪問(wèn)數(shù)據(jù)接口的方式：
1. 在服務(wù)端的響應(yīng)行中設(shè)置：
Access-Control-Allow-Origin: 允許訪問(wèn)的域名地址
2. jsonp
3. 是否服務(wù)端代理
思路：通過(guò)python來(lái)請(qǐng)求對(duì)應(yīng)的服務(wù)器接口，獲取到數(shù)據(jù)以后，
總結(jié)
以上所述是小編給大家介紹的vue中axios實(shí)現(xiàn)數(shù)據(jù)交互與跨域問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
- VUE項(xiàng)目axios請(qǐng)求頭更改Content-Type操作
- vue的axios請(qǐng)求改變content-type為form-data問(wèn)題
- Vue.js使用axios動(dòng)態(tài)獲取response里的data數(shù)據(jù)操作
- Vue-axios-post數(shù)據(jù)后端接不到問(wèn)題解決
- 詳解vue中使用axios對(duì)同一個(gè)接口連續(xù)請(qǐng)求導(dǎo)致返回?cái)?shù)據(jù)混亂的問(wèn)題
- Vue axios 將傳遞的json數(shù)據(jù)轉(zhuǎn)為form data的例子
- 使用vue插件axios傳數(shù)據(jù)的Content-Type及格式問(wèn)題詳解
相關(guān)文章
這篇文章主要介紹了vue2和vue3實(shí)現(xiàn)圖片懶加載方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
vue+vant移動(dòng)端顯示table表格加橫向滾動(dòng)條效果
vant移動(dòng)端顯示table效果,增加復(fù)選框,可以進(jìn)行多選和全選,加橫向滾動(dòng)條,可以看全部?jī)?nèi)容,下面通過(guò)本文給大家分享vue+vant移動(dòng)端顯示table表格加橫向滾動(dòng)條效果,感興趣的朋友跟隨小編一起看看吧2024-06-06
vue用ant design中table表格,點(diǎn)擊某行時(shí)觸發(fā)的事件操作
這篇文章主要介紹了vue用ant design中table表格,點(diǎn)擊某行時(shí)觸發(fā)的事件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
這篇文章主要介紹了vue中如何獲取當(dāng)前路由name，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue前端重構(gòu)computed及watch組件通信等實(shí)用技巧整理
這篇文章主要為大家介紹了vue前端重構(gòu)computed及watch組件通信等實(shí)用技巧整理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
Vue使用正則校驗(yàn)文本框?yàn)檎麛?shù)
這篇文章主要介紹了Vue使用正則校驗(yàn)文本框?yàn)檎麛?shù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue3 elementUI如何修改el-date-picker默認(rèn)時(shí)間
這篇文章主要介紹了Vue3 elementUI如何修改el-date-picker默認(rèn)時(shí)間，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
VUE項(xiàng)目實(shí)現(xiàn)全屏顯示功能之screenfull用法
這篇文章主要介紹了VUE項(xiàng)目實(shí)現(xiàn)全屏顯示功能之screenfull用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
nuxt框架中對(duì)vuex進(jìn)行模塊化設(shè)置的實(shí)現(xiàn)方法
這篇文章主要介紹了nuxt框架中對(duì)vuex進(jìn)行模塊化設(shè)置的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue輸入框中輸完后光標(biāo)自動(dòng)跳到下一個(gè)輸入框中的實(shí)現(xiàn)方法
最近在工作中遇到了些問(wèn)題,總結(jié)下分享給同樣遇到這個(gè)問(wèn)題的朋友,這篇文章主要給大家介紹了關(guān)于vue輸入框中輸完后光標(biāo)自動(dòng)跳到下一個(gè)輸入框中的實(shí)現(xiàn)方法,需要的朋友可以參考下2023-03-03