2016-08-25 55 views
3

所以我有這個名爲'data.js'的本地文件包含各種數據。如何刷新頁面,只要我的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

步驟1:分離數據和邏輯。第2步:實際上「獲取」數據文件(使用'jQuery.get()'或'jQuery.ajax()'。步驟3:比較接收到的數據和之前的數據並決定如何處理它(放棄/更新頁) –

+0

@ mpf82是完全正確的,最好的方法可能是在像setInterval()這樣的循環中進行AJAX調用,然後比較新數據和舊數據,如果不同,則更新包含div的數據(但不是整個頁面imho) 例如,您可以使用redraw()函數來預設data-div元素的HTML內容的更改。 – Aethyn

回答

0

讓我們來分析一下。你想:

  • 檢查一番定期
  • 要檢查的就是一個遠程文件
  • 如果它的變化要採取的行動

正如在評論中提到,有很多方法可以在Javascript中完成以上所有內容。

首先,讓我們將定期檢查的內容:你可以使用一個遞歸循環setTimeoutsetInterval

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函數的定義給你。

相關問題