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

【问题标题】：i tried to upate my ejs page with fetch but it doesn't work我试图用 fetch 更新我的 ejs 页面，但它不起作用
【发布时间】：2022-01-18 23:09:46
【问题描述】：

我尝试构建一个简单的应用程序，但遇到了问题我的应用程序只是保存在数据库中的一些人的数据，目标只是在屏幕上显示它们，但我们可以按名称搜索这些人。我有一个 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.. 有人可以帮我吗？

【问题讨论】：

你在做fetch("/") 然后......什么都没有。这就像打电话给某人，把电话放在桌子上，然后盯着电话看。您需要处理响应并对其进行处理。

标签： javascript node.js express fetch ejs

【解决方案1】：

Ajax 的重点是您使用 JavaScript 发出请求，然后将响应返回给您的 JavaScript 进行处理。通常这会涉及到DOM update。

您的 JavaScript 完全忽略了响应。

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

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

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

【讨论】：

感谢朋友。找到你了。