简单 Ajax(?) 更新需要指导

Question

（初学者警报）

我正在开发一个具有无头 CMS 和完全自定义前端的网站。

我想要实现的是：

通过 API 将帖子列表加载到框架中，如上所示。（我对此很满意，尽管使用 php ...这可能会使事情变得混乱，无法实现我想要实现的目标？）

然后，当单击帖子标题时，另一个 API 调用会检索该帖子 ID 的正文文本并将其显示在主体框架中，如图所示，无需页面刷新等，可能会添加一些 CSS 效果进行过渡。

我不会撒谎，我从来没有做过任何Java脚本（这是我认为我必须使用的？）并且不知道从哪里开始......

任何帮助我前进的帮助都将不胜感激，我不一定要求完整的解决方案，只是在某个地方开始研究-我已经看到了有关 fetch 和其他东西，但它是使用单击来获取 id，然后进行重新加载发生在另一个框架中，这是我苦苦挣扎的地方

谢谢！

还没有尝试过任何东西，因为我什至不确定我应该使用的方法， fetch 是正确的还是其他的？

Answer 1

要实现您所描述的功能（在单击标题时加载帖子列表并动态更新帖子正文内容），您需要使用 JavaScript 以及一些基本的 AJAX 技术。

您的 HTML 中需要两个主要部分：

帖子标题的容器（布局的左侧）。 帖子正文的容器（布局的右侧）。

这是 HTML 的简化版本：

<div id="post-list">
    <!-- Titles are loaded here via JavaScript -->
</div>
<div id="post-body">
    <!-- The content of the post will be displayed here when a title is clicked. -->
</div>

您可以使用 JavaScript 的 fetch 函数从 API 加载帖子标题。这是一个简单的例子：

document.addEventListener("DOMContentLoaded", function() {
    fetch('YOUR-API-HOST-FOR-POST-CONTENT')
        .then(response => response.json())
        .then(data => {
            const postList = document.getElementById('post-list');
            data.forEach(post => {
                const titleElement = document.createElement('div');
                titleElement.textContent = post.title;
                titleElement.classList.add('post-title');
                titleElement.dataset.id = post.id;  
                postList.appendChild(titleElement);
            });
        });
});

您需要添加一个事件侦听器来处理对帖子标题的点击。单击标题时，脚本应获取相应的帖子内容并更新帖子正文容器。

document.getElementById('post-list').addEventListener('click', function(event) {
if (event.target.classList.contains('post-title')) {
    const postId = event.target.dataset.id;
    fetch(`YOUR-API-HOST-FOR-POST-CONTENT/${postId}`)
        .then(response => response.json())
        .then(data => {
            const postBody = document.getElementById('post-body');
            postBody.innerHTML = `<h1>${data.title}</h1><p>${data.content}</p>`;
            
        });
}

});