Express.js避免重新加载整个页面
Express.js避免重新加载整个页面
提问于 2017-09-07 15:37:14
目前，我没有一个网站的解决方案，我正在努力建设。页面不是那么大，但我想实现的是，当我打开一个新的选项卡在导航栏时，完整的站点不会重新加载。我使用express.js和胡子作为模板引擎。我的目标是，只有内容重新加载，而不是整个网站，包括Navbar。
这里必须使用Ajax吗？和
我的结构正确吗？
在Server.js文件中，我不确定是否有一个仅重新加载页面内容部分的视图技巧：
app.get('/home', function(req, res) {
res.render('index.html')
});
app.get('/navitem1', function(req, res) {
res.render('navitem1.html')
});
app.get('/navitem2', function(req, res) {
res.render('navitem2.html')
});回答 1
Stack Overflow用户
回答已采纳
发布于 2017-09-07 17:08:04
如果你试图确保你的网页没有重新加载，而切换选项卡和你的网页没有那么大。我建议将所有信息包含在一个.html文件中，将每个“页面”包含在一个带有目标id的div中，然后简单地隐藏/显示所选内容。您可能想查看一下page.js和jquery，它们使这个过程更加容易。
这是如何实现此功能的快速演示：
注意:您需要npm init和npm页面。
index.html：
<html>
<head>
<title></title>
</head>
<body>
<div id="title-area">
<h1>--your title--</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/anotherpage">Another Page</a></li>
</ul>
</nav>
</div>
<div id="home">
--home content--
</div>
<div id="another-page">
--other page content--
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="vendors/scripts/page.js"></script>
<script src="scripts/controllers/routes.js"></script>
</body>
</html>脚本/控制器/常规.：
很抱歉，在全球范围内IFFE功能，这是复制粘贴。
'use strict';
(function(module){
const homeController = {};
homeController.init = function(){
$('#another-page').hide();
$('title').html('Home');
$('#home').fadeIn('slow');
}
module.homeController = homeController;
})(window);
(function(module){
const anotherpageController = {};
anotherpageController.init = function(){
$('#home').hide();
$('title').html('anotherpage');
$('#another-page').fadeIn('slow');
}
module.anotherpageController = anotherpageController;
})(window);
page('/', homeController.init);
page('/anotherpage', anotherpageController.init);
page();如果你想要一个更好的演示，你可以查看我构建的应用程序(其中大部分内容都是撕掉的) https://github.com/loganabsher/portfolio-2.0。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46100332
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号