如何从动态加载的html动态加载新页面？

Question

我目前有一个问题，我的网页有一个图片页面，该页面动态上传用户可以上传的图片。每张图片卡都有一个按钮，单击该按钮可以显示一个包含有关该特定图片的 cmets 的新页面。评论和图片信息都以数组的形式存储在服务器上。我不确定如何在不将新 HTML 页面编码为单页应用程序的情况下使每张图片卡上的按钮生成新页面。另外，我将如何将图片标题的值传递到新页面，以便我可以过滤 cmets 以仅包含有关特定图片的内容？我已经有返回所有图片和 cmets 的 get 和 post 请求从服务器。 server.js

function loadpics() {
    document.getElementById('insertpics').innerHTML='' 
    fetch ('http://127.0.0.1:8090/pics',{
        method: 'GET',
        headers: {
            "Content-Type":"application/json"
        }
     })
    .then((res) => { return res.json(); })
    .then(pics => {
        for (let pic of pics){
            const y= `
            <div class="card" style="width: 18rem;">
            <img class="card-img-top" src=${pic.picurl} alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">${pic.username}</h5>
              <p class="card-text">${pic.nameofpic}</p>
            <a  class="btn btn-info" href="#" >View Comments on this picture</a>
            </div>
          </div>
            `;

            document.getElementById('insertpics').innerHTML+=y;
        }
    })
};
loadpics();

如您所见，我在卡片末尾有一个按钮，但不知道如何使它生成一个空白页，其中只有与该照片链接的 cmets。图片数组具有这种结构 [{"username":"username","picname":"nameofpic","pic":"pic.png"}] 并且评论数组具有这种结构 [{"username":"username ","picname":"nameofpic","comment":"comment"}]。任何帮助将不胜感激 ！编辑：请有人帮忙。

Answer 1

创建一个仅包含单个 pic 和 cmets 的新页面。 在“a”标签中添加网址。例如http://127.0.0.1:8090/viewPic/{id}