如何使用JavaScript在我的index.html文件中嵌入API调用?

Question

我正试图找出如何将API调用响应嵌入到我的index.html文件中，以便使用JavaScript更新网站计数器。

我已经尝试了多个博客和YouTube教程，但由于我没有经验的JS我真的很挣扎。

下面是我的API:https://b9hsa93hif.execute-api.eu-west-2.amazonaws.com/Prod/hello/

这是我尝试的script.js文件:

const countEl = document.getElementById('count');
updateVisitCount();
function updateVisitCount() {
fetch('https://b9hsa93hif.execute-api.eu-west-2.amazonaws.com/Prod/hello/')
.then(res => res.json())
.then(res => {
countEl.innerHTML = res.value;
})
}

由于每次页面刷新时我的API都会自动更新，我认为我不需要JavaScript函数本身来计数-但我不知道如何正确地重写它。

下面是我尝试的index.html文件的片段:

</div>  
<p>This page was viewed</p>
<h1 id="count"></h1>
<p>times</p>

我想让我的静态网页显示This page was viewed [return result of API call] times.

提前感谢!

——更新

我已经设法解决了这个问题，感谢贡献@Barmar因为他们指引了我正确的方向，而将res.value更新为res.clicks是必不可少的一步。

然而，主要问题是我的API链接到API网关和Lambda函数，我在那里缺少一些关键代码。当我试图在API网关资源上启用CORS时，我意识到这一点，并在寻求帮助时，我发现了这个SO线程。其中一个注释包含了Lambda函数中要包含的正确代码(我在>>>& lt; & lt; & lt;):

return {
'statusCode': 200,
>>>'headers': {
"Access-Control-Allow-Origin": "*"
},<<<
'body': json.dumps({'clicks': int(ddbResponse['Attributes']['clicks'])})

当我在Lambda函数中更新它，并根据我更新的index.html文件刷新网站时，它正常工作。

再次感谢大家!

Answer 1

你必须将代码更改为

fetch('https://b9hsa93hif.execute-api.eu-west-2.amazonaws.com/Prod/hello')
.then(response => response.json())
.then(res => {
// do something
document.getElementById("test").innerHTML = res.clicks;   //you used of clicks parameter
//do something
});

<h1 id="test"></h1>