網頁問題 json / jquey / javasript的應用

javascript json jquery 前端工程師前端

choco891 2020-05-16 12:40:03 ‧ 1982 瀏覽

分享至

各位大神好，我是網頁新手，

想請問

假設一個網頁有四個連結

每個連結都有id (依照json檔的id)

點選連結之後，進入新的頁面，

新的頁面會隨著id顯示格式一樣但不同的內容(內容也是依照json檔)

這樣該怎麼寫?

能請大大給個方向嗎?

謝謝

看更多先前的討論...收起先前的討論...

dragonH iT邦超人 5 級 ‧ 2020-05-16 14:14:15 檢舉

只有一個 json 檔還是有多個

/001

是回傳 001.json

還是回傳一整個 json 檔中的

id 001 的 data

choco891 iT邦新手 5 級 ‧ 2020-05-16 14:36:20 檢舉

回傳一整個 json 檔
像是這樣↓
data:array(3)
0:{id:"001", title:"第一"}
1:{id:"002", title:"第二"}
2:{id:"003", title:"第三"}
3:{id:"004", title:"第四"}

Luis-Chen iT邦新手 4 級 ‧ 2020-05-16 17:04:12 檢舉

聽起來你是講路徑的問題，這個不是靜態檔案的相對路徑，你可以參考一下前端框架 SPA 的 router觀念

Luis-Chen iT邦新手 4 級 ‧ 2020-05-16 17:05:20 檢舉

https://reacttraining.com/react-router/web/example/url-params 看一下範例上面的網址路徑格式是不是你想像的

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2020-05-16 14:04:04

你得先說明以下幾個問題

1.是否有後端語言。
2.是否有一個啟始頁

由於你的問題，偏向於單純的html。
所以如果大膽假設你並沒後端語言支援的情況下。

一般會告訴你用ajax來去取json檔的方式來處理。
不要採用連結id的方式。

因為如果是純html的話，要取網址id值還需要一道手續才行。
但如果有後端語言支援就比較單純多。
使用get傳值的方式就可以取得其參數值來撈對應的json了。

回應 2
分享
檢舉

choco891 iT邦新手 5 級 ‧ 2020-05-16 14:36:57 檢舉

沒有後端語言
純前端~

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2020-05-16 14:59:21 檢舉

如果非得要連結式的話。就需要多一道手續。也就是網址取參數的方式。
這裏提供一個網路上找到的方法給你

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
// query string: ?foo=lorem&bar=&baz
var foo = getParameterByName('foo'); // "lorem"

這樣就先解決連結取值的問題。
剩下來的就是如何利用這個值。
這部份只要你知道如何用jquery的ajax來取json檔就可以了。
這部份我就不寫程式出來給你了。畢竟網路上找很多。
努力一下吧。

登入發表回應