如何根據點擊哪個ul li id從json獲取數據？

這是我的第一個網站項目，但我決定問這個，因爲我不知道如何開始，儘管看了無數的教程。如何根據點擊哪個ul li id從json獲取數據？

我有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來填充大量的對象，我想通過對帖子ID得到這個

我不知道如何id.Everything我發現是與Angular/React和我仍然在學習基本的JS/Ajax

因此，如果我點擊li？id = 1 ...以獲得所有json數據與「postId」

來源

2017-10-19 Bokch

不需要你做postId = 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（你應該使用一個類更具體的），然後發射了an ajax request，沿着這是我們的讀出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的控制檯，但您可能想要以某種方式將其顯示給用戶。

來源

2017-10-19 18:10:05 mpen

如何根據點擊哪個ul li id從json獲取數據？

回答

相關問題