javascript - 通过ajax和url更新页面而不重新加载页面(node.js)

Question

在不刷新页面的情况下更新库存并通过按钮事件和 URL 访问的正确方法是什么？这样，当 url param id 基于路由时，它会将其更新到特定页面。就像购物网站上的产品页面一样。下面通过ajax请求而不是通过url(inventory/2)工作，它只是将我带到发布的数据而不是渲染的 View 。我要求它能够通过 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});
});

(注意:如果您的数据包含HTML，您可能必须在Jade模板中使用!= content而不是= content。)

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

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