JSON更新時にページをリロードせずにdivのクラスとコンテンツを更新するにはどうすればよいですか

bugfix> javascript > 投稿 2020-08-22 19:24

だから、私は自分のページのコンテンツを更新することに基づいて非常に頻繁に更新される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のみを更新して、ページがリロードされたときに不快な点滅が表示されないようにする方法はありますか？

javascript

jquery

html

回答 1 件

jQueryの $.ajax() を使用できます W3 Schoolsが説明する方法。

これが私の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);
}

bugfix

JSON更新時にページをリロードせずにdivのクラスとコンテンツを更新するにはどうすればよいですか

javascript

jquery

html

関連記事