每当我的json数据文件发生更改时如何刷新页面
所以我有这个名为’data.json’的本地文件包含各种数据。 我只想在json文件中的某些数据发生变化时刷新页面。 如果您能用一些代码解释我，请感谢您的帮助。 我在网上搜索，我找不到合适的答案。
创建一个计时器，每隔X毫秒获取一次json文件。 如果自上次提取以来json内容已更改，请重新加载页面。 下面的示例代码使用JQuery来获取json文件，并检查每2000毫秒。 确保json文件包含有效的json。
检测文件更改
好吧，首先，您必须在文件更改时触发事件或其他内容。 有关这方面的一些信息可以在这里找到： 使用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()刷新页面，但在您的情况下，刷新页面将失去与文件的连接（用户必须在文件输入中重新选择它）
如果您想使用新文件更新某些数据，只需重新触发它，但我强烈建议您不要刷新页面。
但是，如果您确实想要完全刷新页面，您可以创建一种“帮助应用程序”（后台应用程序将连续读取文件，并通过websocket在文件更改时通知Javascript）。
您可以使用Websockets或$ ajax （对于jQuery）或XMLHttpRequest （非jQuery）执行类似的操作。
帮助应用程序可以用Java，C＃或Python（仅适用于Windows的C＃）或可以实现HTTP服务器或Websocket服务器的任何其他语言编写。
如果你正在使用Node，它有一个内置的fs.watch()函数，它基本上检查文件是否/何时发生了变化。 否则，您可能希望setInterval通过AJAX调用定期获取JSON文件并更新您的变量/ DOM。 您可以将旧JSON对象与新JSON对象进行比较，如果它们不同，则使用新数据更新DOM /变量。
您希望以非常彻底的方式检查您的json文件，以了解它是否已更改。 所以你应该做的是：
- 使用jQuery
getJSON()将json文件中的初始数据加载到localStorage对象。
然后在定时循环中使用jQuery getJSON()从json文件中获取新数据，在深度和非常严格的方式中进行比较，并在此处作为类似问题的答案发布此awsome函数的一些帮助。 如果您的localStorage对象， initial JSON和new JSON匹配Object.deepEquals(initialJSON, newJSON)进行任何更改，如果没有，则刷新页面。
检查此stackOverflow问题和答案
是否可以使用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'));
使用javascript或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);
参考日期比较示例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!"); } }