我试图用 fetch 更新我的 ejs 页面，但它不起作用

Question

我试图构建一个简单的应用程序，但我遇到了问题我的应用程序只是保存在数据库中的一些人的数据，目标只是将它们显示在屏幕上，但我们可以按姓名搜索这些人。我有一个 ejs 页面和 javascript 文件连接到他

js代码：

document.querySelector(".search__box_input").addEventListener("click", async function(event) {
    fetch("/", {
        method: "get",
        headers: new Headers({'search': searchButton.value})
    })
})

节点代码：

app.get("/", async(req, res) => {
    if(!req.headers["search"] || req.headers["search"] === ''.trim()) {
        return res.render("home", persons: await personSchema.find({}).limit(10)}) // personSchema is my mongoose schema
    } else {
        const foundDocuments = await personSchema.find({"name.first": req.headers["search"]})
        console.log(foundDocuments); // i got my document correctly
        if(!foundDocuments) return res.send("could'nt find the user")
        return res.render("home", {
            persons: foundDocuments // It doesn't render again
        })
    }
})

我想再次渲染ejs.. 有人可以帮助我吗？

Answer 1

Ajax 的要点是您使用 JavaScript 发出请求，响应返回给您的 JavaScript 进行处理。通常，这将涉及执行 DOM update.

您的 JavaScript 完全忽略了响应。

const response = await fetch(...);
const text = await response.text();
console.log(text);

如果要重新渲染整个页面，请不要使用Ajax。只需使用常规表单提交即可。

（并将 search 参数放在查询字符串中，而不是自定义 header）。

我试图用 fetch 更新我的 ejs 页面，但它不起作用

i tried to upate my ejs page with fetch but it doesn't work

javascript

ejs

fetch

node.js

express