Обновление страницы через ajax и url без перезагрузки страницы (node.js)

Question

Что было бы правильным способом сделать обновление инвентаря без обновления страницы и доступной как с помощью события кнопки, так и с url. Таким образом, когда URL-адрес url основан на маршруте, он обновит его до определенной страницы. Как страница продуктов на торговом сайте. Ниже выполняется запрос ajax, но не через url (inventory/2) он просто приводит меня к опубликованным данным, а не к визуализированному представлению. Мне нужно, чтобы он мог перейти на определенную страницу по URL-адресу, чтобы я мог ссылаться на него. Он также должен иметь возможность вернуться к стандартной загрузке страницы, когда javascript не включен.

View (инвентаризации)

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}); 
}); 

(Примечание. Возможно, вам придется использовать != content вместо = content в шаблоне Jade, если ваш data содержит HTML.)

Теперь пользователь может получить доступ к различным состояниям страницы по URL-адресам /inventory и /inventory/2, а вызов AJAX будет выполнен с использованием третьего URL-адреса, /api/inventory/2.

Кроме того, вы можете динамически обновлять поле url в браузере пользователя, если это потребуется, - см. Ответы to this question для получения более подробной информации.