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

Question

我目前正在处理一个项目，该项目有许多具有相同结构的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部分包含图像和导航栏等内容。但每次都是相同的代码。有没有可能我可以点击一个带有节目名称的按钮(例如节目1(，并且该节目可以通过get参数动态显示？(单击按钮，链接根据节目而更改->http://www.test.com/index.html*？show=show1，网站根据链接从数据库获取数据(

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

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

为每一个答案感到高兴！

Answer 1

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

在您的情况下，要从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端点

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