通過ajax和url更新頁面而無需重新加載頁面（node.js）

Question

什麼是正確的方式來更新清單而不刷新頁面，並且可以通過按鈕事件和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

會推薦給有路徑兩套獨立的：一個是人類用戶，一個用於腳本（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，則您可能必須在翡翠模板中使用!= content而不是= content。）

現在，用戶可以通過urls /inventory和/inventory/2訪問頁面的不同狀態，而AJAX調用將使用第三個URL /api/inventory/2完成。

最重要的是，您可以根據需要動態更新用戶瀏覽器中的url字段 - 有關更多詳細信息，請參閱to this question的答案。