iT邦幫忙

1

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

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

想請問

假設一個網頁有四個連結

每個連結都有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 看一下範例上面的網址路徑格式是不是你想像的

1 個回答

2
浩瀚星空
iT邦超人 1 級 ‧ 2020-05-16 14:04:04

你得先說明以下幾個問題

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

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

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

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

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

沒有後端語言
純前端~

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

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檔就可以了。
這部份我就不寫程式出來給你了。畢竟網路上找很多。
努力一下吧。

我要發表回答

立即登入回答