每当我的 js 数据文件更改时如何刷新页面答案

【问题标题】：How to refresh a page whenever my js data file changes每当我的 js 数据文件更改时如何刷新页面
【发布时间】：2017-01-01 20:44:29
【问题描述】：

所以我有一个名为“data.js”的本地文件，其中包含各种数据。

  var json={ 
  'city': 'madrid',
  'zip':'21212',
  'street':'bergstrasse',
  'house':'15',

};
for(key in json)
{
  if(json.hasOwnProperty(key))
    $('input[name='+key+']').val(json[key]);

}

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<form action="options.php" method="post" >

<input type="text" name="city" placeholder="stadt" >  
<br>
<input type="text" name="zip" placeholder="zip" >  
<br>
<input type="text" name="street" placeholder="straße" >  
<br>
<input type="text" name="house" placeholder="hausnummer" >  
<br>
<input type="submit" value="speichern" name="saves"></input>


</form>

   <script src="data.js"></script>

我只想在 js 文件中的某些数据发生更改时刷新我的页面。如果您能用一些代码解释我，感谢您的帮助。我在网上找遍了，我找不到合适的答案。

【问题讨论】：

第一步：分离数据和逻辑。第 2 步：实际“获取”数据文件（使用 jQuery.get() 或 jQuery.ajax()。第 3 步：将接收到的数据与之前的数据进行比较并决定如何处理（丢弃/更新页面）。
@mpf82 完全正确，最好的方法可能是在 setInterval() 之类的循环中进行 AJAX 调用，然后比较新数据和旧数据，如果不同，更新包含数据（但不是整个页面恕我直言）。例如，可以使用 redraw() 函数来预设 data-div 元素的 HTML 内容的变化。

标签： javascript jquery html json

【解决方案1】：

让我们分解一下。你想：

定期检查
您要检查的是远程文件
如果它发生了变化，你想采取行动

如 cmets 中所述，有多种方法可以在 Javascript 中完成上述所有操作。

首先让我们解决定期检查的问题：您可以使用递归 setTimeout 循环，或 setInterval：

function waitOneSecond = function() {
    setTimeout(function() {
        check(); // will get to this in a second
        waitOneSecond();
    }, 1000); // 1000 = one second
});

function checkEverySecond() {
    setInterval(function() {
        check();
    }, 1000); // 1000 = one second

接下来，我们需要一种方法来检查文件是否发生了变化。实际的“是否更改了部分”取决于您（您可能需要考虑使用像 Underscore 或 Lodash 的 _.isEqual 这样的函数），但要做到这一点，您需要获取最新版本的 JSON 文件。幸运的是，jQuery 有一个方法可以做到这一点：getJSON:

function check() {
    $.getJson('http://yourserver.com/data.js').done(function(json) {
        if (didChange(json)) {// use _.isEqual to write your didChange
            takeAction();
        }
    });
}

如您所见，最后一个示例还包括采取行动，但我还是将 takeAction 函数的定义留给您。

【讨论】：