Question

在不刷新页面的情况下进行库存更新的正确方法是什么，并且可以通过按钮事件和URL访问。因此，当url param id基于路由时，它会将其更新到特定页面。就像购物网站上的产品页面一样。下面的工作是通过ajax请求而不是通过url（inventory / 2）它只是将我带到发布的数据而不是渲染的视图。我要求它能够通过网址转到特定页面，以便我可以链接到它。当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

建议使用两组不同的路径：一组用于人类用户，另一组用于脚本（API）。在上面的routes文件中，您混合了两个 - res.send(data)用于AJAX脚本，res.render('inventory')用于直接显示在浏览器中以响应用户的请求 - 也就是说，基本上，为什么你没有得到你期望的结果。

请在下面看一个简单示例如何构建应用程序文件（在您认为合理的情况下扩展它）：

查看：

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});
});

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

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

最重要的是，您可以根据需要动态更新用户浏览器中的网址字段 - 有关详细信息，请参阅答案to this question。

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

1 个答案: