![](/img/trans.png)
[英]How can I update page content without reloading the page on Modal close?
[英]How can i update div's class and content without reloading the page on JSON update
所以我有一个JSON数据库,该数据库根据我更新页面内容的频率经常更新。 目前,我正在使用此脚本进行重新加载:
var previous = null;
var current = null;
setInterval(function() {
$.getJSON("sampledatabase.json", function(json) {
current = JSON.stringify(json);
if (previous && current && previous != current) {
console.log('refresh');
location.reload();
}
previous = current;
});
}, 1200);
事实是,它应该用于全屏大屏幕监视,因此重新加载时闪烁会分散您的注意力。
在刷新时(发生在数据库更新中),我正在更改div的类,并用这样的数据库中的更多数据填充它们(这只是代码的一部分)
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var i;
var output = document.getElementsByClassName("env");
var myObj = JSON.parse(this.responseText);
for (i = 0; i < output.length; i++) {
if (myObj.instances[i].status == "UP") {
output[i].classList.add("passed")
} else output[i].classList.add("notPassed")
output[i].innerHTML = "<span class=\"originalsize\">" + myObj.instances[i].id + "</SPAN>" + "<br>" + myObj.instances[i].time
}
}
};
xmlhttp.open("GET", "sampledatabase.json", true);
xmlhttp.send();
有没有一种方法可以仅更新div,以便在重新加载页面时不会出现不愉快的闪烁?
您可以按照W3 Schools的说明使用jQuery的$.ajax()
方法。
这是我的JSFiddle
在我的小提琴中,我还使用了$.each()
方法来解析JSON
数据并将其附加到div中。
function GetPosts() {
$.ajax({
dataType: "json",
url: "https://jsonplaceholder.typicode.com/posts",
success: function(data) {
//console.log(data);
$.each(data, function(index, item) {
console.log(item);
$('.container').append('<div class="posts"><div id="post_container"><h3 id="post_title">' + item.title + '</h3><hr><div id="post_body">' + item.body + '</div><hr><span id="post_userid">' + item.id + '</span></div></div>');
});
}
});
}
您还可以使用setInterval()
函数启用自动更新。
在这种情况下,您可以执行以下操作:
let interval;
let time = 5000; // 5 seconds
function startRefresh() {
interval = setInterval(GetPosts(), time);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.