在前端開發中,我們經常需要從后端服務器獲取數據。然而有些情況下,我們需要從本地獲取數據,比如模擬后端返回的數據或者我們有本地的數據需要展示到頁面上。這時,就需要用到axios請求本地json文件。
首先,在項目根目錄下創建一個json文件,例如“data.json”:
{ "name": "Tom", "age": 20, "city": "Shanghai" }
然后,在需要獲取本地json數據的地方,使用axios發送GET請求:
axios.get('/data.json') .then(function (response) { console.log(response.data); }) .catch(function (error) { console.log(error); });
其中,我們使用axios.get方法發送GET請求,參數是我們所創建的json文件路徑。在請求成功之后,我們將獲取到的數據打印到控制臺中。
最后,我們在頁面上展示獲取到的數據:
axios.get('/data.json') .then(function (response) { const data = response.data; const name = data.name; const age = data.age; const city = data.city; document.getElementById('name').innerHTML = name; document.getElementById('age').innerHTML = age; document.getElementById('city').innerHTML = city; }) .catch(function (error) { console.log(error); });
在這個例子中,我們獲取到了json數據,然后將數據中的“name”、“age”和“city”分別賦值給變量,最后將它們展示到頁面上。
上一篇html 注冊登錄代碼
下一篇html MV播放代碼