Express.js如何使用response.render在客户端进行html渲染？ [英] Express.js how to make html render on client side with response.render?

问题描述

我有以下路线的基本快递js申请：

I have basic express js application with following route:

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

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

It works fine - after logging into main page on my localhost, html from login.pug is nicely rendered on client side. However when my app runs, sometimes I want to render another pug file, when there already is html rendered on client side:

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

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

但是在'仪表板'上发送获取请求时路径，没有任何反应。据我所知，这是因为 res.render 只是将 pug 文件解析为HTML并将其作为普通字符串发送到客户端（我可以在浏览器开发工具中检查，当我检查AJAX响应时，我看到完全呈现的HTML）。

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).

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

Now my question is: is there a way to render HTML from res.render in client automatically? So on server side I just write res.render('template') and on client side page is re-rendered without handling the response?

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

I know I can clear whole DOM and append received string into document.body, I know also that I can make a POST form request and then page will be re-rendered automatically, but I want to avoid both solutions (don't ask why).

提前感谢您的帮助。

推荐答案

当您的Javascript发送Ajax请求时，来自该Ajax请求的响应将返回到您的Javascript。而已。浏览器没有显示任何内容。如果你想对这个回复做一些事情，那么你的Javascript就有责任用它做一些事情（将它插入页面以显示它等等）。

When your Javascript sends an Ajax request, the response from that Ajax request is just returned back to your Javascript. That's it. The browser does not show anything. If you want to do something with that response, then it is the responsibility of your Javascript to do something with it (insert it in the page to show it, etc...).

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

If what you really want is that you want the browser to actually go to the /dashboard URL and then show that page, then your Javascript can just do:

window.location = '/dashboard';

这将告诉浏览器获取该URL的内容，它会向您的服务器发出请求，您的服务器将返回呈现的HTML，浏览器将在页面中显示它，并在浏览器栏中显示 / dashboard 作为URL。这应该做你想要的一切。

This will tell the browser to fetch the contents of that URL, it will make a request to your server, your server will return the rendered HTML and the browser will display it in the page and show /dashboard as the URL in the browser bar. That should do everything you want.

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

So, it's totally up to your Javascript. Pick the right tool for the job. Either fetch data for your Javascript with an Ajax call and process the result in your Javascript or instruct the browser to load a new page. One or the other.

但是当获取请求发送到'boardboard'路径时，没有任何反应。据我所知，这是因为res.render只是将pug文件解析为HTML并将其作为普通字符串发送到客户端（我可以在浏览器开发工具中查看，当我检查AJAX响应时，我看到完全呈现的HTML）。

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）。

Yes, that what Ajax requests do. They fetch content from the server and return the data back to your Javascript (and only to your Javascript).

有没有办法渲染来自客户端的res.render的HTML会自动生效吗？

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

是的，使用 window.location ='/ dashboard'; 来自你的Javascript。

Yes, use window.location = '/dashboard'; from your Javascript.

所以在服务器端我只写res.render（'template'）并在客户端页面重新呈现而不处理响应？

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调用是将数据返回到脚本的编程请求。这就是他们的本意。但是，从Javascript中可以通过将 window.location 设置为新URL来自动显示内容。

Not from an ajax call. Ajax calls never automatically display content. Never. Ajax calls are programmatic requests that return data to your script. That's what they are. But, yes from Javascript you can cause content to be automatically displayed by setting window.location to a new URL.

这篇关于Express.js如何使用response.render在客户端进行html渲染？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！