nodejs express res.render in ajax calls



我在 expressjs 中使用 res.render(( 有问题 我使用 Ajax 在这条路由上请求:

route.get('/about',authentication,(req,res)=>{
res.render('about');
});

我做了一些搜索,发现res.render不适用于 ajax 调用 那么如何在没有res.render()的情况下更改和呈现页面.

如果我删除res.renderconsole.log它实际上可以工作,但实际上任何代码都可以工作,但不能res.render(通过单击链接,我在标头中发送带有 ajax 请求的令牌,然后在我的路由中我有一个身份验证中间件,该中间件获取令牌然后将用户重定向到about.ejs页面(

我只想更改页面。任何想法都会帮助大家。 感谢 这是前端请求:

$(document).ready(function(){
$('#about').click(function(){
// window.location.href='/about';
$.ajax({
method:'get',
url:'http://localhost:5000/about',
headers:{"authtoken":localStorage.getItem('authToken')}
}).done(()=>{
// window.location.href='/about';
}).catch(e=>console.log('header.ejs error'));
});
});

res.render使用模板编写HTML页面,并将最终的组成结果从服务器发送到客户端。它不会在客户端窗口中呈现页面。

如果通过在浏览器的地址栏中输入 URL 来发出请求,则浏览器将执行请求并呈现服务器发送的结果。

如果您执行 ajax 请求,您将收到该响应,但您有责任在.done回调中对其进行处理。浏览器不会神奇地知道如果您执行 ajax 请求,必须对数据执行什么操作。而且因为你的.done回调中没有任何内容,所以什么都不会发生。

所以你必须做这样的事情:

.done(response => {
var bodyContent = response.match(/<body>(.*)</body>/)[1]
$('body').html(bodyContent);
})

通常ajax用于使用服务器中的某些响应来更新页面的一部分,而无需刷新页面。如果要导航到其他路由而不是 ajax,请使用表单提交或href。如果您坚持使用 ajax,则从服务器返回一个 JSON 并使用 javascript 进行更改

requestHandler=(req,res)=>{
res.json({data:{}})
}

第 1 步:创建一个公开网址,比如 http://your-web-site.com/redirect_destination.html

步骤2:从前端发出ajax请求时,使用.redirect()方法将用户重定向到该页面response

编辑:

关键是,我认为不可能通过发出ajax请求来呈现页面。您可以准备一个呈现所需页面的 URL,并使用.redirect()方法将用户重定向到该 URL。

您的路由器不会渲染页面,它只会发送响应,而我不仅用于页面渲染,为什么您在单击事件时调用 ajax 请求。如果不介意,您可以在单击时编写逻辑并使用路由器更改 window.location。它将呈现特定的页面,因为您的路由器应该是这样的:

// about page route (http://localhost:8080/about)
router.get('/about',isAuthenticated, function(req, res) {
res.sendFile(path.join(__dirname+'/public/about.html'));
}); 
function isAuthenticated(req, res, next) {
// do any checks you want to in here
// CHECK THE USER STORED IN SESSION FOR A CUSTOM VARIABLE
// you can do this however you want with whatever variables you set up
if (req.user.authenticated)
return next();
// IF A USER ISN'T LOGGED IN, THEN REDIRECT THEM SOMEWHERE
res.redirect('/');
}

并在单击时更改您的网址以 http://localhost:8080/about

最新更新