使用node/express动态加载网页，需要在同一页面上渲染答案

【问题标题】：Dynamically loading webpage using node/express, need to render on the same page使用node/express动态加载网页，需要在同一页面上渲染
【发布时间】：2019-03-21 07:00:26
【问题描述】：

我正在使用 node 和 express 与 mustache 模板系统，我创建了一个多页网站，但不希望它在渲染时刷新（使其成为单页），我该如何解决这个问题？

我想我需要使用 ajax，我只是不确定如何。

现在它正在将 url 呈现到另一个页面上，但我需要它在同一页面上呈现。

这是部分代码

const express = require('express');
const parseurl = require('parseurl');
const bodyParser = require('body-Parser');
const path = require('path');
const expressValidator = require('express-validator');
const mustacheExpress = require('mustache-express');
const models = require('./models');
const session = require('express-session');
const app = express();

app.engine('mustache', mustacheExpress());
app.set('view engine', 'mustache');
app.set('views', './views')
app.use(express.static('public'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: false
 }));
app.use(expressValidator());

app.use(session({
secret: 'keyboard cat',
resave: false,
saveUninitialized: true
}));


app.get('/', function(req, res) {
  res.render('index')
})

app.get('/signup', function(req, res) {
res.render('signup');
});

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

app.get('/login', function(req, res) {
  if (req.session && req.session.authenticated) {
 var user = models.user.findOne({
  where: {
    username: req.session.username,
    password: req.session.password
  }
}).then(function(user) {
  if (user) {
    req.session.username = req.body.username;
    req.session.userId = user.dataValues.id;
    let username = req.session.username;
    let userid = req.session.userId;
    res.render('index', {
      user: user
    });
  }
})
} else {
res.redirect('/home')
}
})

app.post('/login', function(req, res) {
let username = req.body.username;
let password = req.body.password;

【问题讨论】：

我们需要比这更多的细节。
够详细了吗？
我添加了更多信息
是的，我看到了。但我看不出您的代码与您的问题有什么相关性。
现在它正在渲染 url 并加载，但在不同的页面上 - 我需要在同一页面上

标签： ajax express mustache

【解决方案1】：

如果您尝试将您的应用程序转换为使用单页架构，同时仍然在服务器上预渲染所有 HTML，您将需要实现某种形式的客户端路由器，例如 this one。在您的客户端代码中，在每个路由的回调中，您可以对服务器进行 AJAX 调用，然后将整个 html 文档替换为服务器返回的 html。如果您使用的是 jquery，则类似这样：

route('/login', function(name) {
      $.get("/login", {
            anyotherparamsyouwanttosend: "whatever",
        },
        function(htmlResponse) {
            $('html').html(htmlResponse);
        })
})

但与传统的多页面架构相比，这种方法并没有太大的优势。更好的方法是在客户端呈现胡子模板。在您的 Express 代码中，您将使用 res.json 而不是 res.render 仅发送在客户端呈现 Mustache 模板所需的数据，而不是发送一大块 HTML。

希望这会有所帮助！

【讨论】：