时间戳

首页 > 解决方案 > 如何使用相同的代码使网站更加动态/保存？

javascript - 如何使用相同的代码使网站更加动态/保存？

问题描述

我目前正在开发一个项目，该项目有许多具有相同结构的 html 站点。所以代码基本相同。这些站点的唯一区别是，对于每个站点，我都从我的数据库中访问不同的“分区”。这是在脚本标签中：

<script>
    const api_url = 'urlhere';

async function getRating(){
    const response = await fetch(api_url);
    const data=await response.json();
    const myReviews = data;

  

    document.getElementById('Name').textContent = myReviews[0].PartitionKey;
    document.getElementById('Genre').textContent = myReviews[0].RowKey;
    document.getElementById('Seasons').textContent = myReviews[0].Seasons;
    document.getElementById('Description').textContent = myReviews[0].Description;
    document.getElementById('Rating').textContent = myReviews[0].Rating;
    document.getElementById('Review').textContent = myReviews[0].Review;

    console.log('Success');
}

之前的 html 部分包含图像和导航栏等内容。但每次都是相同的代码。是否有可能我可以单击带有节目名称的按钮（例如 show 1）并且可以通过 get 参数动态显示该节目？（点击按钮，链接根据节目变化 -> http://www.test.com/index.html*?show=show1，网站根据链接从数据库中获取数据）

或者您对我的问题有其他解决方案吗？

我希望你明白我想要做什么，我是一个初学者，所以我不确定我的措辞是否正确，或者是否有可能这样。

为每一个答案感到高兴！

标签： javascripthtml

解决方案

我不确定我的问题是否正确，但我会回答部分问题：

要在您的情况下从 url 获取查询字符串值，您希望获取可以使用的 'show' 参数：

const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
const show_param = params.show ? params.show : "default";

根据“show_param”变量，您可以更改数据源或将其作为参数传递给 API 端点

我不确定“显示 X”按钮是否在同一个文件中，如果它们是，您可以简单地调用获取数据的函数并将其重置为相应的元素。

推荐阅读