每当我的json数据文件发生更改时如何刷新页面

时间:2016-05-26 19:09:05

标签: javascript jquery json

所以我得到了这个名为' data.json'的本地文件。包含各种数据。我只想在json文件中的某些数据发生变化时刷新页面。如果您能用一些代码解释我,请感谢您的帮助。我在网上搜索,我找不到合适的答案。

5 个答案:

答案 0 :(得分:14)

创建一个计时器,每隔X毫秒获取一次json文件。如果自上次获取后json内容已更改,请重新加载页面。下面的示例代码使用JQuery来获取json文件,并检查每2000毫秒。确保json文件包含有效的json。

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    var previous = null;
    var current = null;
    setInterval(function() {
        $.getJSON("data.json", function(json) {
            current = JSON.stringify(json);            
            if (previous && current && previous !== current) {
                console.log('refresh');
                location.reload();
            }
            previous = current;
        });                       
    }, 2000);   
</script>
</html>

答案 1 :(得分:4)

检测文件更改

首先,您必须在文件更改时触发事件或其他内容。有关这方面的一些信息可以在这里找到:Check if file has changed using HTML5 File API

(从链接中复制)类似的东西应该做的工作:

(function() {
    var input;
    var lastMod;

    document.getElementById('btnStart').onclick = function() {
        startWatching();
    };
    function startWatching() {
        var file;

        if (typeof window.FileReader !== 'function') {
            display("The file API isn't supported on this browser yet.");
            return;
        }

        input = document.getElementById('filename');
        if (!input) {
            display("Um, couldn't find the filename element.");
        }
        else if (!input.files) {
            display("This browser doesn't seem to support the `files` property of file inputs.");
        }
        else if (!input.files[0]) {
            display("Please select a file before clicking 'Show Size'");
        }
        else {
            file = input.files[0];
            lastMod = file.lastModifiedDate;
            display("Last modified date: " + lastMod);
            display("Change the file");
            setInterval(tick, 250);
        }
    }

    function tick() {
        var file = input.files && input.files[0];
        if (file && lastMod && file.lastModifiedDate.getTime() !== lastMod.getTime()) {
            lastMod = file.lastModifiedDate;
            alert("File changed: " + lastMod);
        }
    }
})();

刷新页面

在这种情况下,您的问题在于刷新。通常可以使用location.reload()刷新页面,但在您的情况下,刷新页面将失去与文件的连接(用户必须在文件输入中重新选择它)
如果您想使用新文件更新某些数据,只需重新触发它,但我强烈建议不要刷新页面。

但是,如果你想完全刷新页面,你可以制作一种&#34; helper-app&#34; (后台应用程序将连续读取文件,并通过websocket在文件发生更改时通知Javascript)。

您可以使用Websockets$ajax(对于jQuery)或XMLHttpRequest(非jQuery)执行类似的操作。

帮助应用程序可以用Java,C#或Python(仅限Windows的C#)或可以实现HTTP服务器或Websocket服务器的任何其他语言编写。

答案 2 :(得分:1)

如果您正在使用Node,它有一个内置的fs.watch()函数,它基本上会检查文件是否/何时发生了变化。否则,您可能希望setInterval通过AJAX调用定期获取JSON文件并更新您的变量/ DOM。您可以将旧JSON对象与新JSON对象进行比较,如果它们不同,则使用新数据更新DOM /变量。

答案 3 :(得分:1)

您希望以非常彻底的方式检查您的json文件,以了解它是否已更改。 所以你应该做的是:

  • 使用jQuery getJSON()将json文件中的初始数据加载到localStorage对象。

然后在定时循环中使用jQuery getJSON()从json文件中获取新数据,以深入和非常严格的方式比较它们,并在此awsome function作为答案发布类似的问题在这里如果您的localStorage对象initial JSONnew JSON匹配Object.deepEquals(initialJSON, newJSON),则表示未进行任何更改,如果没有,则刷新页面。

答案 4 :(得分:0)

  

检查此stackOverflow问题和答案

     

Is it possible to retrieve the last modified date of a file using Javascript?

     

如果它与您的通话功能在同一台服务器上,则可以使用   的XMLHttpRequest -

This example is not asynchronous, but you can make it so if you wish.
function fetchHeader(url, wch) {
    try {
        var req=new XMLHttpRequest();
        req.open("HEAD", url, false);
        req.send(null);
        if(req.status== 200){
            return req.getResponseHeader(wch);
        }
        else return false;
    } catch(er) {
        return er.message;
    }
} 
 alert(fetchHeader(location.href,'Last-Modified'));
  

Refresh a page using javascript or html

     

刷新页面的方法   这是第一个20:

location = location
location = location.href
location = window.location
location = self.location
location = window.location.href
location = self.location.href
location = location['href']
location = window['location']
location = window['location'].href
location = window['location']['href']
location = window.location['href']
location = self['location']
location = self['location'].href
location = self['location']['href']
location = self.location['href']
location.assign(location)
location.replace(location)
window.location.assign(location)
window.location.replace(location)
self.location.assign(location)
and the last 10:

self['location']['replace'](self.location['href'])
location.reload()
location['reload']()
window.location.reload()
window['location'].reload()
window.location['reload']()
window['location']['reload']()
self.location.reload()
self['location'].reload()
self.location['reload']()
self['location']['reload']()
  

所以简单地将两个和两个结合在一起就可以得到你想要的东西

如果您想定期检查

setInterval(function(){ 
//the function here 
and compare and update last_mod_date var if there changes else keep it like that

}, 3000);

Reference date comparison Example Mozilla

var

    nLastVisit = parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1")),
    nLastModif = Date.parse(document.lastModified);

if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
    document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname;
    if (isFinite(nLastVisit)) {
        alert("This page has been changed!");
    }
}