如何根据api的响应更改html页面的一部分?

Question

你好，我有一个网站，它目前在一个共享的主机包上运行，这意味着我没有能力在服务器上运行node.js，但是，我想知道我是否可以使用正常的javascript来改变我页面上的某个元素(将p元素从操作更改为离线，当我收到up命令时从绿色更改为红色并再次返回)我正在使用健康检查。当我的监视器脱机时，向URL发送get或post请求。

如果我不能使用接收请求从正常的javascript我怎么能改变这些微小的东西在一个网站上使用像快递?无论何时，我看到的都是提供静态文件或Hello World之类的功能。我怎么能提供一个HTML文件与所有的CSS和东西，而只改变一个小的东西?

Answer 1

你的问题是针对你的具体情况，而不是在每个人都能从中受益的更广泛的背景下。

你应该问的问题更像是"如何基于AJAX调用更新HTML代码";或者类似的。

无论如何，我将把这个答案留在这里，因为我相信它可以帮助你实现你的目标。

我认为理论上你说的是"ajaxax"(异步JavaScript)请求。

您可以使用来自这些请求的回调，传统上是"then"部分更新你的html代码或更新，比如一个元素的CSS类。

假设你这样做:

fetch("http://example.com/movies.json")
.then((response) => response.json())
.then((data) => {
// you can console.log(data) here to see on the console, the structure of the received
// object from the API call
// this is just an example, based on the idea that the API would return a JSON object with
// a property named "online" which would be a boolean (true or false) value
if (data.online) { // if online is true add the CSS class "online"
document.getElementById("IdOfElementToUpdate").classList.add("online");
}else{ // if online is false or not there, remove the CSS class "online"
document.getElementById("IdOfElementToUpdate").classList.remove("online");
}
});

在这种情况下，你会有一个默认的css样式的元素(让我们说离线)，然后，当元素被添加类"online"你会有一些CSS规则来覆盖默认的样式。