JS，当json数据改变时如何刷新页面或div？答案

【问题标题】：JS, how can i refresh the page or div when json data changed?JS，当json数据改变时如何刷新页面或div？
【发布时间】：2017-10-15 14:36:26
【问题描述】：

您好，我启动了 javascript 并制作了一个动态 ajax GET 页面，（当 json 数据更改时刷新页面等）。

我的问题是我需要在数据更改时刷新页面或容器 div 这是我的代码 HTML：

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Refresh" content="600">
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <div id="container">
        <div id="event"></div>
            <div id="counter">
        <span id="countdown"></span>
    </div>
    </div>
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="custom.js"></script>
</body>
</html>

JS：

var request = $.ajax({
    url: "data.php",
    type: "GET",
    dataType: "json"

}).done(function (data) {
    var write = '<img src="' + data.img + '">';
    $("#event").html(write);
    $("#event").delay(data.countdown * 1000).fadeOut();
    var i = data.countdown;
    var fade_out = function () {
        $("#counter").fadeOut().empty();
        clearInterval(counter);
    };
    setTimeout(fade_out, data.countdown * 1000);
    function count() { $("#countdown").html(i--); }
    var counter = setInterval(function () { count(); }, 1000);
});

JSON是这样的

{"img":"img\/maltolmeca.jpg","countdown":"60"}

【问题讨论】：

我假设您只是尝试使用请求中的数据更新#event div，当您运行上述代码时，页面会输出什么？
@dyatesupnorth 是的：P

标签： javascript jquery html css json

【解决方案1】：

在这个时代，也许值得您研究 Angular、React 和 Vuejs 等为您处理“数据刷新”的库。

无论如何，在您的 done() 函数中，您只需调用 location.reload() 即可刷新页面。

...虽然我想这不是您真正想要实现的目标。像这样刷新页面通常会给用户带来不好的体验，所以让我们尝试一个更好的解决方案。

“重新加载” div 的一种方法是执行以下操作：

if (data.success){
    $("#event").fadeOut(800, function(){
      $("#event").html(msg).fadeIn().delay(2000);
   });
}

甚至

$("#event").load("#event");

【讨论】：

【解决方案2】：

我只是把这段代码放在我的 php 文件夹中，就像石器时代一样，但它对我的项目来说还可以。

<script>
var previous = null;
var current = null;
setInterval(function() {
    $.getJSON("data.php", function(json) {
        current = JSON.stringify(json);            
        if (previous && current && previous !== current) {
            console.log('refresh');
            location.reload();
        }
        previous = current;
    });                       
}, 2000);

【讨论】：