jQuery AJAX刷新多個Div（重復刷新）
[英]JQuery AJAX Refresh Multiple Divs (Repeating Refresh)
問題描述
我已經花了幾個小時在這里尋找答案，但找不到。 我的自動刷新有效，問題在於它可以刷新彼此內部的所有div。 例如，我有一個計算機輔助調度應用程序，該應用程序具有可用單元，已分配呼叫和未決呼叫的秒數，但是當刷新時，它將所有這三個div放到彼此的三個中！
var auto_refresh = setInterval(
function () {
$('#avunits').load('supervisor.php #avrefresh');
}, 5000);
另一個問題是我嘗試使用多div語法來實現它們，但是僅在第一個div上有效，而忽略了其他兩個：
var auto_refresh = setInterval(
function () {
$('#avunits,#assigned,#pending').load('supervisor.php .refresh');
}, 5000);
在第二個示例中，它將所有三個div放入“可用單位” div中，但不更新已分配或待處理的div。
最后，我嘗試在同一個中一起完成所有三個操作，但仍然無法正常工作：
var auto_refresh = setInterval(
function () {
$('#avunits').load('supervisor.php #avrefresh', function (){
$('#assigned').load('supervisor.php #avrefresh', function (){
$('#pending').load('supervisor.php #penrefresh');
})})}, 5000);
我要執行的操作是刷新所有三個div，並將它們分開。
相關代碼：
// All of the code is within the same webpage. I plan to separate them to their own pages once everything works.
// This is the working version. Currently, the AVRefresh works, but if I do what I said in my Stack Overflow post, it doesn't work.
<head>
<?if($_GET['info'])
{ }
else
{?>
<script src="java/jquery.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function () {
// If I use "#avunits" after supervisor.php it embedds a second DIV. So, I made a new one so as to not mess up my CSS
$('#avunits').load('supervisor.php #avrefresh');
}, 5000);
</script>
<?}?>
<title>WebCAD Dispatch</title>
<link rel="stylesheet" type="text/css" href="supervisor_base.css">
<link rel="stylesheet" type="text/css" href="callview_assigned.css">
<link rel="stylesheet" type="text/css" href="callview_pending.css">
</head>
<body>
// (Continued)
<div id="background">
<div id="fixedwidth">
<div id="sidebar">
<div id="avunits">
<div id="avrefresh">
// Various MySQL Queries
// If the user is a supervisor, staff, or admin, and is not banned and approved.
{
if(isset($_GET['info']) || isset($_GET['refresh']))
{
// Various MySQL Queries
// HTML/PHP Readouts/Echoes
}
else
{
// Various MySQL / PHP / HTML Codes that retrieve the users
// And prints out all units, and if busy, their status and Call#
}
}
else
{
// Javascript back to index.php for login prompt
}
</div>
</div>
<div id="callview">
<div id="assigned">
<div id="assigned_refresh">
// Various MYSQL/PHP Calls to retrieve incident information and assigned units (if any)
</div>
</div>
<div id="pending">
<div id="pending_refresh">
// Various MYSQL/PHP Calls to retrieve incident information
</div>
</div>
</div>
</div>
</div>
</div>
// (Continued)
</body>
我刪除了無關的MySQL / PHP代碼以保護應用程序的完整性。
2 個解決方案
解決方案1
1 已采納 2016-02-24 18:43:27
聽起來您正在嘗試加載一頁，然后用加載的頁面的不同片段替換頁面的不同片段。 您將無法使用load（）來完成此任務，除非您希望在三個不同的時間加載同一頁面。 相反，您需要使用$ .get（）並自己更新片段：
$.get("refresh.php")
.done(function(r) {
var newDom = $(r);
$('#avunits').replaceWith($('#avunits',newDom));
$('#assigned').replaceWith($('#assigned',newDom));
$('#pending').replaceWith($('#pending',newDom));
});
如果絕對必須使用負載，則需要分別顯式處理每個片段。 如Xorifelse的答案所述，與許多jQuery方法不同，get（）在第一個匹配的元素上運行，而忽略其余元素。 因此，如果使用$（“。refresh”）。get（），則只會更新類“ refresh”的第一個元素。
$('#avunits').load('supervisor.php #avunits_refresh');
$('#assigned').load('supervisor.php #assigned_refresh');
$('#pending').load('supervisor.php #pending_refresh');
解決方案2
0 2016-02-24 18:19:18
我不確定您要通過使用'supervisor.php .refresh' ， $('#.refresh') ， supervisor.php #avrefresh的if then else子句， supervisor.php #avrefresh還是最奇怪的一個$('#avunits,#assigned,#pending').load('supervisor.php .refresh'); }, 5000); $('#avunits,#assigned,#pending').load('supervisor.php .refresh'); }, 5000);
它完全按照您說的去做。 改變這些div HTML代碼#avunits,#assigned,#pending到的輸出load('supervisor.php .refresh')
但是，我什至不確定jQuery是否將此作為有效輸入除外，並且大概會選擇找到的第一個元素並跳過其余元素，對於load函數，我不會冒險猜測從何處獲得該文檔。 如下面的評論所述，它最多期望一個html ID而不是一個類，並且忽略文檔中所述的其余內容（甚至是選擇器）。
load()需要一個有效的URL。 如果您想對supervisor.php做不同的事情，您應該通過load('supervisor.php?action=assigned')使用有效的URL，並通過執行if($_GET['action'] == 'assigned'){} elseif($_GET['action'] == 'pending'){} else {//code for malicous data}在PHP腳本中使用if / else子句將它們分開if($_GET['action'] == 'assigned'){} elseif($_GET['action'] == 'pending'){} else {//code for malicous data} ，依此類推，以返回不同的輸出。
如果用戶向ajax請求發送惡意數據，則此示例中的else語句應該是一個動作。
警告
如果不更改load()網址，則jQuery甚至瀏覽器都有可能緩存響應。 您將需要清除緩存或使用帶有$_GET請求的鏈接來分隔緩存。
使用Ajax保持重新排序的div刷新
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.