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

你好，我开始JavaScript和即时通讯制作一个动态的Ajax GET页面，（当JSON数据改变时刷新页面等）。JS，如何在json数据更改时刷新页面或div？

我的问题是我需要刷新页面或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"}

来源

2017-10-15 Yunus Berk Kaynak

我以为你只是想更新来自请求的数据#event格的，能输出到页面，当你运行上面的代码？ – dyatesupnorth

@dyatesupnorth yep：P. –

在这个时代，它可能是值得你寻找的g转化为库，如Angular，React和Vuejs，它们可以为您处理“数据刷新”。

无论如何，在你的done()功能，你可以拨打location.reload()这将刷新页面。

...虽然我想这不是你真正想要实现的。像这样刷新页面通常是不好的用户体验，所以让我们尝试一个更好的解决方案。 “重装”一个div的

一种方法是做这样的事情：

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

甚至

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

来源

2017-10-15 14:49:52 dyatesupnorth

我只是把这个代码到我的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);

来源

2017-10-16 21:33:19

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

回答

相关问题