• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

285
Views
Cómo consumir una API REST correctamente en un sitio web de varias páginas

¿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 :)

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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 };
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error