Question

我需要使用express（＆gt; 3.0）框架在nodejs（v1.8.15）中动态加载/呈现页面的一部分。通常，我想创建一个单页面应用程序。

我在页面顶部有一个带有链接的菜单。点击链接将改变下面的内容，如AJAX页面加载。

例如：

>home|login|signup|chat
..content for home..

如果我按下'注册'链接：

home|login|>signup|chat
..content for signup..

在express中，我在服务器上有路由：

var express = require('express');
var app = express();

app.get('/signup', function(req, res) {
    // render signup.jade
    res.render('signup');
}
app.post('/signup', function(req, res) {
    // .. work with information
    if (ok) res.send('ok', 200); else res.send(error, 200);
}

阅读this后，我发现我应该使用socket.io。我很了解套接字，因此很容易从客户端向服务器发送有关“点击链接”的数据。

Q1：如何动态渲染/加载页面，就像我在快递中写的一样？

是的，我可以使用AJAX进行页面加载，但它是否适用于快递中的.post方法？我应该如何组织我的想法来创建这样一个网站？

顺便说一下，我读过Derby和SocketStream，但我不明白。

Q2：我可以在目标中使用Derby或SocketStream（网站功能：登录，注册，聊天）吗？怎么样？

如果SocketStream是我需要的，那将是非常糟糕的，因为Heroku无法使用它。

Answer 1

Q1）这实际上很简单，不需要Socket.io，Derby等等。您可以通过ajax使用任何方法调用任何expess路由，使用jQuery使ajax非常容易。在您的示例中，假设您的容器HTML文件有一个id为'container'的div，这是您希望加载ajax的内容的位置：

$.ajax({ url: 'http://yoursite.com/signup'
     , type: 'GET'
     , dataType: 'html'
    })
.done(function(data) {
  $('#container').html(data);
})
.fail(function() {
  console.log("Something went wrong!");
});

Express支持所有HTTP谓词（GET，POST，PUT等）。要动态加载页面，请使用GET，然后当用户输入一些登录信息时，您可以将其发送到Express路由，告诉您它是否有效，并使用jQuery相应地修改DOM。

Q2）如Q1中所述，无需使用Derby或SocketStream。简单的旧jQuery + basic Express将为您提供所需的一切！

如何在express中动态呈现/加载页面？

1 个答案: