![](/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.