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

Question

在不刷新页面并通过按钮事件和 url 访问的情况下进行库存更新的正确方法是什么？这样当 url 参数 id 基于路由时，它会将其更新到特定页面。就像购物网站上的产品页面。下面通过 ajax 请求而不是通过 url (inventory/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

建议使用两组独立的路径：一组用于人类用户，一组用于脚本 (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});
});

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

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

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