ajax和axios請求本地json數據對比
AJAX 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術,通過在后台與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
ajax請求本地json
test.json { "first":[ {"name":"王小婷","nick":"祈澈菇涼"}, {"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", //返回數據格式為json success: function(data) { //請求成功完成后要執行的方法 //each循環 使用$.each方法遍歷返回的數據date $.each(data.first, function(i, item) { var str = '<div>姓名:' + item.name + '昵稱：' + item.nick + '</div>'; document.write(str); }) } }) </script> </html>
效果如下：
圖片.png
axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端
1. 從瀏覽器制作XMLHttpRequests 2. 讓HTTP從node.js的請求 3. 支持Promise API 4. 攔截請求和響應 5. 轉換請求和響應數據 6. 取消請求 7. 自動轉換為JSON數據 8. 客戶端支持防止XSRF axios請求本地json
相關依賴
安裝
1：npm安裝
npm install axios --save
2.在main.js下引用axios
import axios from 'axios'
一切環境依賴搭建好之后
下面來寫個例子：axios請求本地json
1：在static文件夾底下新建json文件，（ 本地JSON文件一定要需放在static文件夾之下。）
訪問服務器文件，應該把 json文件放在最外層的static文件夾，這個文件夾是vue-cli內置服務器向外暴露的靜態文件夾
圖片.png
2：test.json數據格式如下：
{ "first":[ {"name":"王小婷","nick":"祈澈菇涼"}, {"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：前台顯示：
圖片.png
區別總結
axios是通過promise實現對ajax技術的一種封裝，就像jQuery實現ajax封裝一樣。
簡單來說： ajax技術實現了網頁的局部數據刷新，axios實現了對ajax的封裝。