通过ajax和url更新页面而不重新加载页面（node.js）

什么是正确的方式来进行清单更新，而无需刷新页面，并通过button事件和URL访问。 所以，当url参数ID是基于路线，它会更新到特定的页面。 就像购物网站上的产品页面一样。 下面的工作通过ajax请求，但不通过url（库存/ 2）它只需要我的发布的数据，而不是渲染的视图。 我需要它能够通过url去特定的页面，所以我可以链接到它。 当javascript未启用时，还需要能够回退到标准页面加载。

查看（库存）

extends layout block content div.row div.col-md-offset-2.col-md-8#inventory a(class='btn', href='#') Get More! script. $(function(){ $("a.btn").on("click", function(e) { e.preventDefault(); $.get( '/inventory/2', function(data) { $('#inventory').html(data); }); }); }); 

路线

 router.get('/inventory/:id?', function (req, res) { if(req.params.id){ var id = req.params.id; var data = "Updated and now on page " + id res.send(data); }else{ res.render('inventory'); } }); 

Answer 1

将build议有两套独立的path：一个用于人类用户，一个用于脚本（API）。 在上面的routes文件中，您将两个参数 – res.send(data)用于AJAX脚本， res.render('inventory')用于响应用户请求在浏览器中直接显示 – 也就是说， ，为什么你没有得到你预期的结果。

请看下面的一个简单的例子，如何构build应用程序文件（如您所见，扩展它）：

视图：

 extends layout block content div.row div.col-md-offset-2.col-md-8#inventory = content a(class='btn', href='#') Get More! script. $(function(){ $("a.btn").on("click", function(e) { e.preventDefault(); $.get( '/api/inventory/2', function(data) { $('#inventory').html(data); }); }); }); 

路线：

 var getData = function(id) { return "Updated and now on page " + id; } router.get('/api/inventory/:id', function (req, res) { res.send(getData(req.params.id); } router.get('/inventory/:id?', function (req, res) { var data; if (req.params.id) { data = getData(req.params.id); } else { data = null; } res.render('inventory', {content: data}); }); 

（注意：如果您的data包含HTML，您可能不得不在Jade模板中使用!= content而不是= content ）。

现在，用户可以通过urls /inventory和/inventory/2访问页面的不同状态，而AJAX调用将使用第三个URL /api/inventory/2 。

最重要的是，您可以根据需要dynamic更新用户浏览器中的url字段 – 有关更多详细信息，请参阅此问题的答案。