¿Cuál es el mejor enfoque o la mejor práctica para consumir una API REST dentro de un sitio web de varias páginas en el lado del cliente?
Supongamos que tengo definida la siguiente API REST
/product -> all products, high level information /product/{id} -> detailed product information about product with given id Suponga además que mi sitio web tiene dos páginas .html, index.html y detail.html .
Dentro de index.html consultaría todos los productos con información de alto nivel de mi API REST con una llamada AJAX en Javascript. Luego modifico un elemento de la tabla dentro de la página index.html con el JSON recibido y muestro la información de alto nivel de cada producto dentro de esta tabla.
Cada entrada de la tabla también tiene un enlace a la información detallada del producto, por ejemplo, url/products/42 .
Ahora a la parte interesante. Si presiono el enlace de un producto específico y quiero mostrar la página detail.html con información detallada sobre la identificación del producto presionado, cómo le digo al Javascript dentro de detail.html qué producto presionó el usuario y se debe consultar desde REST API?
Sé cómo realizo estas llamadas API REST en una aplicación móvil nativa, ya que siempre sé qué elemento ha presionado un usuario. Estoy un poco perdido sobre cómo hacer esto en una aplicación de sitio web de varias páginas.
Gracias por enriquecer mi mente :)
Hay muchas maneras de lograr lo que quieres. Aquí algunas pistas con ejemplos de códigos básicos para mostrarle la lógica.
Puede generar enlaces como url/detail.html?product=42 y luego, cuando la página de detalles se está cargando, extraiga el parámetro de la url usando algo como
// detail.html <script type="text/javascript"> 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 });También podría usar el evento de clic en el enlace
<!--index.html--> <div id="container"> <!-- some html --> <a href="javascript:void(0)" onclick="loadProduct(42)"> </div> <script type="text/javascript" src="yourJS.js"></script> //yourJS.js let loadProduct = (product) => { // request API then for example use your detail.html as template to parse response // and inject into html };