在网页上显示NodeJS查询结果-编程知识-白鹭情

我有一个基本的 Web 应用程序，用户可以在其中上传图片。我可以列出这些图片的 URL，但我不知道如何在页面上显示它们。目前我正在使用 aform来执行获取请求，因为其他方法对我不起作用。

服务器端：

router.get('/pictures', async (req, res) => {
  try {
    let user = await User.find({ 
      name: req.query.name
    });
    let result = []
    user.map(user => {
      result.push(user.avatar)
    })
    res.json(result)
  } catch (error) {
    console.log(error)
  }
})

客户端：

  <form action="/pictures" method="get">
    <input type="text" name="name">
    <input type="submit" value="Get Images" name="submit">
  </form>

这是我回来的：

[
"https://res.cloudinary.com/fidohuncloud/image/upload/v1642794180/eyrfrf8orusaz2bnq7pj.jpg",
"https://res.cloudinary.com/fidohuncloud/image/upload/v1642795673/rrqsddzbjwtfkrm1vbco.jpg"
]

uj5u.com热心网友回复：

我上次处理表单提交已经有一段时间了。您可以使用一些 JS 框架（如 React 或 Angular）来非常快速地完成此操作。或者，如果您想操作 DOM，那么您可以实时添加它。

const images_from_client = [
  "https://res.cloudinary.com/fidohuncloud/image/upload/v1642794180/eyrfrf8orusaz2bnq7pj.jpg",
  "https://res.cloudinary.com/fidohuncloud/image/upload/v1642795673/rrqsddzbjwtfkrm1vbco.jpg"
];

images_from_client.forEach((img) => {
  const i_tag = document.createElement("img");
  i_tag.src = img;
  document.getElementById("app").appendChild(i_tag);
});

<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
</head>

<body>
    <div id="app"></div>
</body>

</html>

uj5u.com热心网友回复：

如果您想使用 vanilla javascript，可以通过覆写默认表单行为来实作。

<!DOCTYPE html>
<html>

<head>
    <title>Form submission</title>
    <meta charset="UTF-8" />
</head>

<body>

  <form id="image-form">
    <input type="text" name="name">
    <input type="submit" value="Get Images" name="submit">
  </form>
  <div ></div>
</body>
</html>

您的 javascript 可以使用Fetch API向后端服务器发送 GET 请求并将影像附加到您的 HTML 中。

 document.getElementById("image-form").addEventListener("submit", function(e) {
    e.preventDefault();

    fetch("/pictures")
    .then(data => data.json())
    .then(data => {
      data.forEach(function(image) {
        let img = document.createElement("img");
        img.src = image;
        document.querySelector(".images").appendChild(img);
      });
    });
  });