Блог

Каков наилучший подход или наилучшая практика использования API REST на многостраничном веб-сайте на стороне клиента?

Предположим, что у меня определен следующий API REST

 /product -gt; all products, high level information  /product/{id} -gt; detailed product information about product with given id  

Далее предположим, что на моем веб-сайте есть две страницы .html index.html и detail.html .

Внутри index.html я бы запросил все продукты с информацией высокого уровня из моего REST API с помощью вызова AJAX в Javascript. Затем я изменяю элемент таблицы внутри index.html страница с полученным JSON и отображением информации высокого уровня о каждом продукте внутри этой таблицы.

Каждая запись в таблице также содержит ссылку на подробную информацию о продукте, например url/products/42 .

Теперь перейдем к самой интересной части. Если я нажму ссылку на один конкретный продукт и захочу показать detail.html страницу с подробной информацией о нажатом идентификаторе продукта, как я сообщу Javascript внутри detail.html какой продукт пользователь нажал и должен быть запрошен из REST API?

Я знаю, как я выполняю эти вызовы REST API в собственном мобильном приложении, так как я всегда знаю, какой элемент нажал пользователь. Я немного растерялся, как это сделать в многостраничном веб-приложении.

Спасибо, что обогатили мой разум 🙂

Есть много способов достичь того, чего вы хотите. Вот несколько руководств с примерами базового кода, чтобы показать вам логику.

Вы можете создавать ссылки url/detail.html?product=42 , например, когда страница сведений загружается, извлекать параметр из URL-адреса, используя что-то вроде

 // detail.html lt;script type="text/javascript"gt; document.addEventListener("DOMContentLoaded", function() {  const queryString = window.location.search;  console.log(queryString);  //?product=42  const urlParams = new URLSearchParams(queryString);  const product = urlParams.get('product')  console.log(product);  // 42  // here request your api with your product });  

Вы также можете использовать событие щелчка по ссылке

 lt;!--index.html--gt; lt;div id="container"gt;  lt;!-- some html --gt;  lt;a href="javascript:void(0)" onclick="loadProduct(42)"gt; lt;/divgt; lt;script type="text/javascript" src="yourJS.js"gt;lt;/scriptgt;  

 //yourJS.js let loadProduct = (product) =gt; {  // request API then for example use your detail.html as template to parse response   // and inject into html };