nodejs在ajax调用中表达res.render答案

【问题标题】：nodejs express res.render in ajax callsnodejs在ajax调用中表达res.render
【发布时间】：2018-06-07 11:29:00
【问题描述】：

我在 expressjs 中遇到 res.render() 的问题我使用 ajax 请求这条路线：

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

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

如果我删除res.render 和console.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() 表示您正在从服务器返回视图。为什么要在 ajax 中返回视图。我的意思是你的预期结果是什么？
我只想渲染一个页面，如果你有任何其他解决方案说 plz。我刚开始编程，所以我不知道正确的方式。请让我知道
您应该显示用于请求about 页面的客户端JavaScript 代码。 res.render 可以处理 ajax 请求，但这取决于你真正想要做什么。
@t.niese 我更新了问题，你现在可以看到代码了。thx
您对.done(()=>{ } 回调中的响应什么都不做，那么您为什么希望向客户端显示某些内容呢？如果您执行$.ajax，jQuery 不会神奇地替换网站上的内容。

标签： javascript node.js ajax express render

【解决方案1】：

res.render 使用模板组成一个 html 页面，并将最终组成的结果从服务器发送到客户端。它不会在客户端窗口中渲染页面。

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

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

所以你必须这样做：

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

【讨论】：

【解决方案2】：

通常ajax 用于使用来自服务器的一些响应来更新页面的一部分而不刷新页面。如果您想导航到另一条路线而不是 ajax 使用表单提交或href。如果您坚持使用 ajax，则从服务器返回 JSON 并使用 javascript 进行更改

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

【讨论】：

我没明白。如何使用 res.json 渲染页面？我有 about.ejs，我想渲染它
如果您使用 ajax res.render() 将不起作用。相反，您可以通过 res.json() 方法返回 json 数据，您可以在浏览器的 ajax 成功函数上调用该 json 并执行必要的操作正如我提到的那样发生变化。否则你必须提交表单并执行 res.render()。希望你理解
@M14 ajax不需要返回json，其实你可以用ajax请求任何普通的html页面，根据html响应替换页面内容。
我明白了你所说的，但我没有表格。我点击一个链接，然后将发送 ajax 请求。
@t.niese 是真的

【解决方案3】：

第 1 步：创建一个公共 URL，例如 http://your-web-site.com/redirect_destination.html

第 2 步：在从前端发出 ajax 请求时，使用 response 上的 .redirect() 方法将用户重定向到该页面

编辑：

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

【讨论】：

我有一个身份验证中间件，所以如果有人想访问关于页面应该进行身份验证。如果我将他们重定向到公共页面，那么身份验证有什么好处，因为任何人都可以将公共 URL 放在浏览器中看看页面。我说的对吗？
我回答的重点是让您了解我的朋友.redirect() 方法。您没有在问题中提及任何这些身份验证详细信息。将更新我的答案。

【解决方案4】：

你的路由器不会渲染页面，它只会发送响应，我没有得到只是为了页面渲染，为什么你在点击事件上调用 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

【讨论】：

正如您在我的代码中看到的那样，我有一个身份验证中间件，所以我使用 ajax 在标头中设置令牌并将其发送到服务器，这就是我使用 ajax 的原因