如何根據單擊的ul id從json獲取數據？

Question

這是我的第一個網站項目，但是我決定問這個問題，因為盡管看了無數教程，但我不確定如何開始。

我有ul這樣的清單項目

<li><a href="posts.html?id=1">Data for id 1</a></li>
<li><a href="posts.html?id=2">Data for id 2</a></li>

和json.file這樣的

{
 "posts": [{
  "id": 1,
  "postId": 1,
  "img":"",
  "title": ""
}]
}

我希望這個JSON充滿很多對象，並且我想通過postId來獲取它

我不知道如何id。我發現的一切都是Angular / React，我仍然在學習基本的JS / Ajax

因此，如果我用？id = 1 ...單擊li來獲取帶有“ postId”的所有json數據

Answer 1

這個問題很廣泛，但這也許可以幫助您入門。

如果稍微更改HTML結構，會更容易：

<li><a href="" data-id="1">Data for id 1</a></li>
<li><a href="" data-id="2">Data for id 2</a></li>

然后，您可以添加一些JS以添加單擊處理程序。 我將在這里使用jQuery，但是您可以使用純JS，React，Angular或任何您想要的東西輕松地做到這一點。

$('a').on('click', function(ev) {
    ev.preventDefault();
    $.get('/posts.php', {id: $(this).data('id')}).then(res => {
         console.log(res);
    });
});

基本上，我們要添加一個單擊處理所有<a>在頁面上S（你應該使用一個類更具體的），然后發射了一個Ajax請求 ，沿途經過的id ，我們讀出的data-id 。

現在，在服務器上，您將必須編寫一個腳本來解析您的JSON文件並返回您感興趣的數據。我將為您提供一些PHP入門，但是您可以使用Node來做到這一點。 .js或任何其他服務器端語言：

$json = json_decode(file_get_contents('yourfile.json'));
foreach($json['posts'] as $post) {
    if($post['id'] == $_GET['id']) {
        echo json_encode($post);
        exit;
    }
}

然后，在獲取數據之后，您必須決定要對該數據執行的實際操作。 在這里，我剛剛將其記錄到Chrome / Firefox DevTool的控制台中，但是您可能希望以某種方式將其顯示給用戶。