2017-07-31 132 views
1

我有一個腳本從另一個腳本調用一些json數據,但頁面加載時會有延遲。我試着定位「setInterval(function)」,但是當腳本第一次運行時,我無法獲取數據。JQuery加載頁面加載json數據然後每60秒調用json數據

我是否正確設置了setInterval設置。

$(document).ready(function() { 
setInterval(function(){ 
$.getJSON("get_data.php", function(json){ 
json = json[0].data; 
var tr ; 
for (var i = 0; i < json.length; i++) { 
    tr = $('<tr/>'); 
    tr.append("<td width='33%'><div class='clientname-text'>" + json[i].ClientName + "</div></td>"); 
    tr.append("<td width='33%'><div class='roomname-text'>" + json[i].RoomName + "</div></td>"); 
    tr.append("<td width='33%'><div class='time-text'>" + json[i].RoomFromTime + " - " + json[i].RoomToTime + "</div></td>"); 

$('table').append(tr); 
} 
}); 
}, 60000); 
}); 

非常感謝您的時間。

+0

您可以檢查'get_data.php'文件返回正確的JSON數據? –

回答

1

你想使功能在您setInterval命名函數,調用它,然後使用setInterval不斷的打電話,就像這樣:

$(document).ready(function() { 
    function get_data() { 
     $.getJSON("get_data.php", function(json){ 
     json = json[0].data; 
     var tr ; 
     for (var i = 0; i < json.length; i++) { 
      tr = $('<tr/>'); 
      tr.append("<td width='33%'><div class='clientname-text'>" + json[i].ClientName + "</div></td>"); 
      tr.append("<td width='33%'><div class='roomname-text'>" + json[i].RoomName + "</div></td>"); 
      tr.append("<td width='33%'><div class='time-text'>" + json[i].RoomFromTime + " - " + json[i].RoomToTime + "</div></td>"); 

     $('table').append(tr); 
     } 
     }); 

    } 

    get_data(); 
    setInterval(get_data,60000) 
}); 
+0

完美,非常感謝。 – DCJones

2

把所有的這一個功能:

$.getJSON("get_data.php", function(json){ 
json = json[0].data; 
var tr ; 
for (var i = 0; i < json.length; i++) { 
    tr = $('<tr/>'); 
    tr.append("<td width='33%'><div class='clientname-text'>" + json[i].ClientName + "</div></td>"); 
    tr.append("<td width='33%'><div class='roomname-text'>" + json[i].RoomName + "</div></td>"); 
    tr.append("<td width='33%'><div class='time-text'>" + json[i].RoomFromTime + " - " + json[i].RoomToTime + "</div></td>"); 

$('table').append(tr); 
} 

然後調用該函數,則與該功能再次調用setInterval。這樣該函數將立即執行,並且您將立即獲得數據加載。

+0

嗨,哪個功能? – DCJones

+0

無論你想要什麼名稱的功能。這取決於你。 – Difster

+0

@ CumminUp07你有什麼想法我可以改變我的腳本使用'append'到'html()'。在getJSON調用被觸發時,數據沒有得到更新。 – DCJones

0

她你去多了一個解決方案

setInterval(function(){ 
 
    $.getJSON("get_data.php", function(json){ 
 
    json = json[0].data; 
 
    var tr ; 
 
    for (var i = 0; i < json.length; i++) { 
 
     tr = $('<tr/>'); 
 
     tr.append("<td width='33%'><div class='clientname-text'>" + json[i].ClientName + "</div></td>"); 
 
     tr.append("<td width='33%'><div class='roomname-text'>" + json[i].RoomName + "</div></td>"); 
 
     tr.append("<td width='33%'><div class='time-text'>" + json[i].RoomFromTime + " - " + json[i].RoomToTime + "</div></td>"); 
 

 
     $('table').append(tr); 
 
    } 
 
    }); 
 

 
    return arguments.callee; 
 
}(), 60000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

這是一個自調用函數內部setInterval

的jsfiddle鏈接:​​