AJAX 是一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù),通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行更新。
ajax請求本地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", //請求方式為get
dataType: "json", //返回數(shù)據(jù)格式為json
success: function(data) { //請求成功完成后要執(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 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端
1. 從瀏覽器制作XMLHttpRequests
2. 讓HTTP從node.js的請求
3. 支持Promise API
4. 攔截請求和響應(yīng)
5. 轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)
6. 取消請求
7. 自動轉(zhuǎn)換為JSON數(shù)據(jù)
8. 客戶端支持防止XSRF
axios請求本地json
相關(guān)依賴
安裝
1：npm安裝
npm install axios --save
2.在main.js下引用axios
import axios from 'axios'
一切環(huán)境依賴搭建好之后
下面來寫個例子：axios請求本地json
1：在static文件夾底下新建json文件，（ 本地JSON文件一定要需放在static文件夾之下。）
訪問服務(wù)器文件，應(yīng)該把 json文件放在最外層的static文件夾，這個文件夾是vue-cli內(nèi)置服務(wù)器向外暴露的靜態(tài)文件夾
2：test.json數(shù)據(jù)格式如下：
{
"first":[
{"name":"王小婷","nick":"祈澈菇?jīng)?},
{"name":"安安","nick":"壞兔子"},
{"name":"編程微刊","nick":"簡書"}
]
}
3：寫一個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：前臺顯示：
區(qū)別總結(jié)
axios是通過promise實現(xiàn)對ajax技術(shù)的一種封裝，就像jQuery實現(xiàn)ajax封裝一樣。
簡單來說： ajax技術(shù)實現(xiàn)了網(wǎng)頁的局部數(shù)據(jù)刷新，axios實現(xiàn)了對ajax的封裝。
axios是ajax ajax不止axios
原文作者：祈澈姑娘
技術(shù)博客：http://www.itdecent.cn/u/05f416aefbe1
90后前端妹子，愛編程，愛運(yùn)營，愛折騰。
堅持總結(jié)工作中遇到的技術(shù)問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。
