iT邦幫忙

1

[程式新手]如何抓取路由上的json格式 與EJS樣板如何配AJAX使用?

目前已經用假JSON資料用出想顯示的資料樣子
https://ithelp.ithome.com.tw/upload/images/20200922/20129366gciNLUKOMM.png
現在要從下面圖片的網址取得他的JSON資訊
https://ithelp.ithome.com.tw/upload/images/20200922/20129366KV0BotSt5o.png

git連結:https://github.com/bo-han-kao/BicZone/tree/logintest
會用到的檔案:routes/scan.js
:views/scan.ejs
Q1:不知要如何取得網址的JSON資訊
Q2:若Q1問題解決EJS樣板如何配合AJAX達到即時更新效果?

請版上大大指點迷津!

1 個回答

3
dragonH
iT邦超人 5 級 ‧ 2020-09-22 20:09:51
最佳解答

不知要如何取得網址的JSON資訊

可以用 axios

若Q1問題解決EJS樣板如何配合AJAX達到即時更新效果

把你的 scan.js 改成類似這樣

var express = require('express');
var router = express.Router();
const fs = require('fs');
const axios = require('axios').default;
// middleware程式碼,這樣才能抓倒頁面資料
router.use(express.urlencoded({
    extended: false
  }));

router.use(express.json());

router.get('/', async (req, res) => {
  const response = await (await axios.get('http://127.0.0.1:8000/mesh/scan/get-data')).data;
  res.render('scan',{
    devices: response.devices,
  });
});

router.get('/get-data', (req, res) => {
  try {
    const scandata = JSON.parse(fs.readFileSync('./scandata.json', { encoding: 'utf-8' }));
    res.status(200).send({ devices: scandata.payload.devices });
  } catch (error) {
    console.log(error);
    res.status(500).send({ error }).end();
  }
});
module.exports = router;

result
image

看更多先前的回應...收起先前的回應...
jack_kao iT邦新手 5 級 ‧ 2020-09-23 14:46:47 檢舉

感謝dragonH大大的回答,第一個以問題已經順利解決
如果後端json有新增資料或刪除資料時 在前端頁不按F5(重新整理) 的情況下能同步資料顯示嗎?

dragonH iT邦超人 5 級 ‧ 2020-09-23 16:44:23 檢舉

jack_kao

可以啊

輪詢 或 websocket

jack_kao iT邦新手 5 級 ‧ 2020-09-23 17:45:02 檢舉

dragonH
感謝您!給我方向
我在多嘗試看看

dragonH iT邦超人 5 級 ‧ 2020-09-23 17:53:45 檢舉

/images/emoticon/emoticon42.gif

我要發表回答

立即登入回答