Question

您好我启动了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"}

Answer 1

在这个时代，你可能值得研究像Angular，React和Vuejs这样的库来处理数据刷新＆＃39;对你而言。

无论如何，在done()功能中，您只需拨打location.reload()即可刷新页面。

......虽然我想这不是你实际想要实现的目标。像这样刷新页面通常是一种糟糕的用户体验，所以让我们尝试更好的解决方案。

重装的一种方式＆＃39; div是做这样的事情：

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

甚至

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

Answer 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);

JS，如何在json数据更改时刷新页面或div？

2 个答案: