通过ajax和url更新页面，而无需重新加载页面(node.js）

Updating page through ajax and url without reloading the page (node.js)

本文关键字：新加载 加载 js node url ajax 更新 通过      更新时间：2023-12-21

在不刷新页面的情况下，通过按钮事件和url进行库存更新的正确方法是什么。因此，当url param 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');
    }
});

建议使用两组独立的路径：一组用于人工用户，另一组用于脚本（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字段-有关更多详细信息，请参阅此问题的答案。

相关文章：