ページを再ロードせずにajaxとurlでページを更新する（node.js）

Question

ページを更新せずにボタンイベントとURLの両方からインベントリ更新を行う正しい方法は何でしょうか。したがって、url param idがルートに基づいている場合、特定のページにそれを更新します。ショッピングサイトの商品ページのように。以下は、ajaxリクエストを介して動作しますが、url（inventory/2）ではなく、レンダリングされたビューではなく、投稿されたデータになります。 URLで特定のページに移動できるようにする必要があるので、リンクすることができます。また、javascriptが有効になっていない場合は、標準的なページの読み込みに戻す必要があります。人間のユーザのための1とスクリプト（API）のための1：

ビュー（在庫）

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

はパス2つの別々のセットを持つように勧めます。上のroutesファイルでは、AJAXスクリプト用のres.send(data)と、ユーザーの要求に応じてブラウザに直接表示するためのres.render('inventory')という2つを組み合わせています。つまり、基本的に期待した結果が得られないのです。

（あなたが合理的な参照としてそれを拡張）アプリのファイルを構築することができる方法を簡単な例は、以下を参照してください：

ビュー：

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を使用する必要があります。

ユーザーは、url /inventoryと/inventory/2でページのさまざまな状態にアクセスできますが、AJAX呼び出しは3番目のURL、/api/inventory/2を使用して行われます。

さらに、必要に応じてユーザーのブラウザのURLフィールドを動的に更新することができます。詳細はto this questionの回答を参照してください。