Question

我想实现以下项目。该页面有一个包含多个项目的导航栏。应显示每个选项卡的内容而不重新加载页面。我将Nodejs与ejs模板引擎一起使用。我做了很多研究，但我找不到解决方案。我认为你必须向服务器发送一个Ajax请求，它会发回所需的html部分。任何人都可以帮我一个例子吗？我在逻辑上理解它，但我还不能直接实现它。如果您需要任何进一步的信息，请随时给我写信。

问候。

Answer 1

例如，NodeJS服务器应用程序应该只向您发送JSON数据。您需要的所有HTML元素都可以使用JavaScript动态创建，您只需将最近创建的数据插入HTML元素即可。

这只是一个简短的例子：

<div id="div1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
</div>

<script>
    var para = document.createElement("p");
    var node = document.createTextNode("This is new.");
    para.appendChild(node);
    var element = document.getElementById("div1");
    element.appendChild(para);
</script>

Answer 2

要获得有效的解决方案，您最初可以使用两个npm模块来帮助您发送正确的数据。

假设您想发送一些动态数据的html格式，您希望使用html / pug / ejs / handlebars来发送数据，因为如果您的路由器需要处理，您也可以发送数据。

您可以使用node-email-templates将html从其他平台转换为内联css 转换为来自css文件的html。请参阅链接以了解更多信息。

虽然您没有发送电子邮件，但您可以使用它。

现在，您希望从您的路线发送此信息，例如：https://github.com/niftylettuce/node-email-templates/tree/master/examples

现在，您已经生成了附加了css内联的html格式，并且您需要将生成的HTML result.html作为响应发送，但您需要知道根据请求呈现哪些数据，所以您可能需要设置多条路线，或者您可以使用params或query进行设置：

我主要使用它来嵌入css inline到html，但你可以简单地做res.send()并在你的主html中使用css（你收到它的地方）。

路由器

var EmailTemplate = require('email-templates').EmailTemplate;
var path = require('path');
router.get('/api/:page', function(req, res){
 if (req.params.page == 'home')
 {
  //set the directory to your html here : /views/home contains html.pug      
  // and style.css
  var templateDir = path.join(__dirname, '..', 'views', 'home');

  var page = new EmailTemplate(templateDir);
 }

 var user = {name: 'Joe', pasta: 'spaghetti'}

 page.render(user, function (err, result) {
   // NOTE: I am passing user object which you can use to render data same as res.render('', user: user).
   // so in your template user.name will be rendered as Joe and user.pasta will be rendered as spaghetti

   // result.html
   res.status(200).send(result.html);
 });
});

现在您可以使用jquery AJAX或axios，无论您更喜欢接收数据还是申请。

HTML：

您可以将data-page附加到您的链接（或您希望用户点击的任何内容）并将其设置为适当的值。

...
<li class="nav-links"><a href="#" data-page="home">Home</a></li>
<li class="nav-links"><a href="#" data-page="about">About</a></li>
...
<div class="main-content">
 <!-- content to be added here -->
</div>
...

JS

我正在使用jQuery。

$('.nav-links a').click(function(e){

 var page = $(this).attr('data-page');

 $.ajax({
  method: "get",
  url: "/api/"+page,
  success: function(response){
   $('.main-content').empty().append(response);
  }
 });

});

希望它有所帮助。：）

使用Ajax和Nodejs加载动态内容

2 个答案:

路由器

HTML：

JS