使用Jquery自動刷新多個div

爲工作中的大型顯示創建儀表板，我設法讓一個div自動刷新php請求頁面，但我想不出在另一個div上使用此功能的方式爲另一個腳本而不復制整個函數並重命名它，這似乎是愚蠢的。使用Jquery自動刷新多個div

這是我到目前爲止有：

<script type="text/JavaScript"> 
$(document).ready(
function update() 
{ 
    $.get("response.php", function(data){ 
      $("#ajaxtest").html(data); 
      window.setTimeout(update, 10000); 
     }); 
}); 
</script>

我這樣做的計算器一些搜索，發現這個漂亮的小物，雖然其單格只使用...（second example: auto refreshing div with jquery）

來源

2010-11-16 GodsDead

當文檔準備就緒時，您的更新功能已被直接調用。這不一定是個好主意，你希望這個函數可以被多次調用。例如，考慮下面的（未測試的代碼！）：

function update(divId) 
{ 
    $.get("response.php", function(data){ 
    $(divId).html(data); 
    window.setTimeout(update, 10000); 
}

然後

$(document).ready(function(){ 
    update("#ajaxtest"); 
    update("#otherdiv"); 
    update(".divsbycssclass"); 
});

如果你需要一個不同的URL傳遞，在太。您可以通過計時器或事件來調用此更新方法：

$("a").click(function(){ 
    update("#ajaxtest"); 
});

這就是您所說的？如果沒有，請隨時發表評論，我會編輯。

來源

2010-11-16 11:50:11 Simon

$(document).ready(

function update(el) 
{ 
    $.get("response.php", function(data){ 
    el.html(data); 
    window.setTimeout(el, 10000); 
}); 

update($("#ajaxtest")); 

});

來源

2010-11-16 11:50:47

就像一個指針：[Stack Overflow的降價/編輯幫助頁面]（http://stackoverflow.com/editing-help）。歡迎來到SO！ =） – 2010-11-16 11:52:55

你基本上需要做的是一次返回多個內容集。這意味着以某種結構發送數據，所以你的JS可以快速解析它並適當地應用內容。最好的方法是使用JSON - 一種易於閱讀並且是Javascript的子集的數據交換格式。

首先，改變你的PHP做內容的數組發送：

$divs = array (
    'firstDiv' => $firstDivContent, 
    'secondDiv' => $secondDivContent 
);

然後您就需要使用json_encode將它們編碼爲JSON：

$divs_json = $divs;

那麼這回瀏覽器與適當的標題：

header('Content-type: application/json'); 
echo $divs_json; 
die();

在您的Javascript，你將只有需要d提出一個請求以接收這兩個部分。您可以使用setInterval和一個匿名函數，使每10秒的代碼重複：

setInterval(function(){ 
    $.get('response.php', function(data) { //data is a JS object with two properties, firstDiv and secondDiv 
     $('#firstDiv').html(data.firstDiv); 
     $('#secondDiv').html(data.secondDiv); 
    }); 
}, 10000);

來源

2010-11-16 11:55:47 lonesomeday

這只是一個未經測試的想法，但不妨一試...

function update(){ 
    // all your defined classes which are .refreshingDivs will do the following 
    $('.refreshingDivs').each(function(){ 
     // foreach refreshingDiv, get their id attribute and send with request 
     // so that response.php knows what to do for each specific div 
     $.get('response.php?id=' + $(this).attr('id'), function(data){ 
      // place the returned data inside refreshingDiv children 
      // which has the .placeholder class 
      $(this).children('.placeholder').html(data); 
      window.setTimeout(update, 10000); 
     }); 
    }); 
} 
$(document).ready(function(){ 
    update(); 
});

如果你有控制器刷新Simon的方法似乎最適合你。

來源

2010-11-16 12:01:42 acm

我添加了一些問題得到這個工作，所以根據冉巴茲克的回答，我想出了以下似乎適用於我的問題。

$(document).ready(function(){ 
    var refreshId = setInterval(function(){ 
     update("#test", "/test.php"); 
    }, 30000); 
    $.ajaxSetup({ cache: false }); 

    update("#test", "/test.php"); 
}); 

function update(divId, fileId) 
{ 
    $.get(fileId, function(data){ 
    $(divId).html(data); 
    }); 
}

我現在有想法，如果這是對還是錯，但它適用於我。

線

window.setTimeout(update, 10000);

冉酒吧-ZIK的回答只是不想爲我工作，不知道爲什麼。初始加載工作，但刷新沒有，所以我修改了上面的代碼以使其工作。

來源

2014-09-02 01:54:59 mattauckland

使用Jquery自動刷新多個div

回答

相關問題