Express Js + Node JS + 将 .html 加载到 div 并更改 URI答案

【问题标题】：Express Js + Node JS + load .html into div and change URIExpress Js + Node JS + 将 .html 加载到 div 并更改 URI
【发布时间】：2014-11-03 20:19:55
【问题描述】：

我最近开始将 Express.js 与 Node.js 和渲染引擎 .ejs 一起使用

我想加载一个 .ejs 文件，它基本上是一种 .html 形式到我页面上的 div 中。到目前为止，我已经非常熟悉如何使用 jQuery 的 load() 函数来做到这一点，但是使用此方法后的 URI 保持不变。如下例所示：

$('.about').bind('click', function(event){
    event.preventDefault();
    $('.container').load('about.ejs');
})

我单击 about 按钮，它会将 about 加载到 div 中。但 URI 保持不变 www.page.com/

我在 Node.JS 和 Express.JS 中的工作方式如下：

app.get('/about', function (req, res){
    res.render('about',{
        title: appName,
        menu:  "about" 
    });
});

有什么方法可以使用 Express js 重新创建此行为，以便将 URI 更改为 mypage.com/about ？

【问题讨论】：

嗯...也许只是一个普通的超链接？ .ejs 支持布局和局部，所以你去吧。
是的，但我不希望页面重新加载，只是要使用加载的 html 填充特定的 div。有点像当您单击 Facebook 上的链接时，您的聊天窗口仍然在原处，而页面 I 正在加载新数据。
那你应该看看AJAX。
拥有像node.js这样强大的框架而无法执行这样一个基本任务的目的是什么？
因为这是客户端问题，而不是服务器端问题。

标签： jquery node.js express url-routing ejs

【解决方案1】：

试试这个。

$('.about').bind('click', function(event){
    event.preventDefault();
    $('.container').load('about.ejs');
    history.pushState({}, 'About', '/about');
});

不过要小心。 Not all browsers support push state. 有一些库，比如 pjax，可以为你处理这个问题。

【讨论】：

谢谢。它有帮助。我能说什么。