Question

我目前有一个问题，我的网页有一个图片页面，可以动态上传用户可以上传的图片。每张图片卡都有一个按钮，单击该按钮可显示包含有关该特定图片的评论的新页面。评论和图片信息都以数组的形式存储在服务器上。我不确定如何让每张图片卡上的按钮生成一个新页面，而无需将新 HTML 页面编码为单页应用程序。另外，我将如何将图片标题的值传递到新页面，以便我可以过滤评论以仅包含有关特定图片的评论？我已经有了返回所有图片和评论的获取和发布请求从服务器。 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();

正如你所看到的，我在卡片的末尾有一个按钮，但不知道如何让它生成一个空白页面，上面只有链接到那张照片的评论。图片数组有这个结构 [{"username":"username","picname":"nameofpic","pic":"pic.png"}] 评论数组有这个结构 [{"username":"username ","picname":"nameofpic","comment":"comment"}]。任何帮助将不胜感激！编辑：有人请帮忙。

Answer 1

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

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

1 个答案: