javascript - 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'路径时，没有任何反应。据我了解，发生这种情况是因为 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 中处理结果，要么指示浏览器加载新页面。一个或另一个。

But when get request is send on'dashboard'path, nothing happens. As I understand, this happens because res.render just parses pug file into HTML and sends it to client as plain string (which I can inspect in browser developers tool, when I check AJAX response I see exactly rendered HTML).

是的，这就是 Ajax 请求所做的。它们从服务器获取内容并将数据返回给您的 Javascript(并且仅返回给您的 Javascript)。

is there a way to render HTML from res.render in client automatically?

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

So on server side I just write res.render('template') and on client side page is re-rendered without handling the response?

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