Express.js如何使用response.render在客户端渲染html？

Question

我有以下路线的基本 express js 应用程序：

router.get('/', function(req, res){
        res.render('login');
    });

它工作正常 - 在我的本地主机上登录主页后，来自 login.pug 的 html 很好地呈现在客户端。但是，当我的应用程序运行时，有时我想渲染另一个 pug 文件，而客户端已经渲染了 html：

app.get('/dashboard', function(req, res){

    res.render('dashboard', {user: req.query.login});
});

但是当 get 请求在'dashboard'path 上发送时，什么也没有发生。据我了解，这是因为 res.render 只是将 pug 文件解析为 HTML 并将其作为纯字符串发送给客户端（我可以在浏览器开发人员工具中检查它，当我检查 AJAX 响应时，我会看到完全呈现的 HTML）。

现在我的问题是：有没有办法在客户端自动从 res.render 渲染 HTML？所以在服务器端我只写res.render('template') 并在客户端页面重新渲染而不处理响应？

我知道我可以清除整个 DOM 并将接收到的字符串附加到 document.body 中，我也知道我可以发出 POST 表单请求，然后页面将自动重新呈现，但我想避免这两种解决方案（不要'不要问为什么）。

提前感谢您的帮助。

Answer 1

当您的 Javascript 发送 Ajax 请求时，来自该 Ajax 请求的响应只是返回给您的 Javascript。而已。浏览器不显示任何内容。如果您想对该响应执行某些操作，那么您的 Javascript 有责任对其执行某些操作（将其插入页面以显示它，等等...）。

如果您真正想要的是您希望浏览器实际转到/dashboard URL 然后显示该页面，那么您的 Javascript 可以这样做：

window.location = '/dashboard';

这将告诉浏览器获取该 URL 的内容，它将向您的服务器发出请求，您的服务器将返回呈现的 HTML，浏览器将在页面中显示它并将 /dashboard 显示为 URL浏览器栏。这应该可以满足您的所有需求。

所以，这完全取决于您的 Javascript。为工作选择合适的工具。使用 Ajax 调用为您的 Javascript 获取数据并在您的 Javascript 中处理结果或指示浏览器加载新页面。一个或另一个。

但是当get请求在'dashboard'路径上发送时，什么也没有发生。据我了解，这是因为 res.render 只是将 pug 文件解析为 HTML 并将其作为纯字符串发送给客户端（我可以在浏览器开发人员工具中检查它，当我检查 AJAX 响应时，我会看到完全呈现的 HTML）。

是的，Ajax 请求就是这样做的。他们从服务器获取内容并将数据返回给您的 Javascript（并且只返回给您的 Javascript）。

有没有办法在客户端自动从 res.render 渲染 HTML？

是的，在您的 Javascript 中使用 window.location = '/dashboard';。

所以在服务器端我只写 res.render('template') 并且在客户端页面被重新渲染而不处理响应？

不是来自 ajax 调用。 Ajax 调用永远不会自动显示内容。绝不。 Ajax 调用是向脚本返回数据的编程请求。他们就是这样。但是，是的，通过 Javascript，您可以通过将 window.location 设置为新 URL 来自动显示内容。