AJAX 是一種在無需重新加載整個(gè)網(wǎng)頁的情況下襟齿，能夠更新部分網(wǎng)頁的技術(shù),通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換梯澜，AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新寞冯。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對(duì)網(wǎng)頁的某部分進(jìn)行更新。
ajax請(qǐng)求本地json
test.json
{
"first":[
{"name":"王小婷","nick":"祈澈菇?jīng)?},
{"name":"安安","nick":"壞兔子"},
{"name":"編程微刊","nick":"簡書"}
]
}
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
$.ajax({
url: "ceshi.json", //json文件位置
type: "GET", //請(qǐng)求方式為get
dataType: "json", //返回?cái)?shù)據(jù)格式為json
success: function(data) { //請(qǐng)求成功完成后要執(zhí)行的方法
//each循環(huán) 使用$.each方法遍歷返回的數(shù)據(jù)date
$.each(data.first, function(i, item) {
var str = '<div>姓名:' + item.name + '昵稱：' + item.nick + '</div>';
document.write(str);
})
}
})
</script>
</html>
效果如下：
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端
1. 從瀏覽器制作XMLHttpRequests
2. 讓HTTP從node.js的請(qǐng)求
3. 支持Promise API
4. 攔截請(qǐng)求和響應(yīng)
5. 轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)
6. 取消請(qǐng)求
7. 自動(dòng)轉(zhuǎn)換為JSON數(shù)據(jù)
8. 客戶端支持防止XSRF
axios請(qǐng)求本地json
相關(guān)依賴
安裝
1：npm安裝
npm install axios --save
2.在main.js下引用axios
import axios from 'axios'
一切環(huán)境依賴搭建好之后
下面來寫個(gè)例子：axios請(qǐng)求本地json
1：在static文件夾底下新建json文件吮龄，（ 本地JSON文件一定要需放在static文件夾之下俭茧。）
訪問服務(wù)器文件，應(yīng)該把 json文件放在最外層的static文件夾漓帚，這個(gè)文件夾是vue-cli內(nèi)置服務(wù)器向外暴露的靜態(tài)文件夾
2：test.json數(shù)據(jù)格式如下：
{
"first":[
{"name":"王小婷","nick":"祈澈菇?jīng)?},
{"name":"安安","nick":"壞兔子"},
{"name":"編程微刊","nick":"簡書"}
]
}
3：寫一個(gè)axios
getData() {
axios.get('../../static/test.json').then(response => {
console.log(response.data);
}, response => {
console.log("error");
});
}
4：整體代碼如下：
<template>
<div id="app">
</div>
</template>
<script>
import axios from "axios";
export default {
name: "app",
data() {
return {
itemList: []
}
},
mounted() {
this.getData();
},
methods: {
getData() {
axios.get('../../static/test.json').then(response => {
console.log(response.data);
}, response => {
console.log("error");
});
}
}
}
</script>
5：前臺(tái)顯示：
區(qū)別總結(jié)
axios是通過promise實(shí)現(xiàn)對(duì)ajax技術(shù)的一種封裝母债，就像jQuery實(shí)現(xiàn)ajax封裝一樣。
簡單來說： ajax技術(shù)實(shí)現(xiàn)了網(wǎng)頁的局部數(shù)據(jù)刷新尝抖，axios實(shí)現(xiàn)了對(duì)ajax的封裝毡们。
axios是ajax ajax不止axios
原文作者：祈澈姑娘
技術(shù)博客：http://www.reibang.com/u/05f416aefbe1
90后前端妹子，愛編程昧辽，愛運(yùn)營衙熔，愛折騰。
堅(jiān)持總結(jié)工作中遇到的技術(shù)問題奴迅，堅(jiān)持記錄工作中所所思所見青责，歡迎大家一起探討交流。
