jQuery的AJAX在同一个页面上的多个元素的实时更新 [英] jQuery AJAX live update on multiple elements on the same page
问题描述
我钻研了一些AJAX和我想利用jQuery的。
I'm delving into some AJAX and I'm trying to utilise jQuery.
我有一个索引页面，该页面链接到多个页面和旁边的每个页面视图计数。
I have an index page which links to multiple pages and next to each page is a view count.
我想查看次数刷新和自动更新每隔几秒钟，使这些页面上可以查看页面的计数的实时更新。
I would like the view count to refresh and automatically update every couple of seconds so that those on the page can view live updates of the page counts.
我来翻过下面的脚本运行良好的基于网页的单一的Ajax元素上，但对于10个或更多？
I've come accross the following script that works well based on a single Ajax element on the page, but what about 10 or more?
有没有一种更有效的方式（简称剪切和粘贴的声明10倍），让所有的字段逐个更新？
Is there a more efficient way (short of cutting and pasting the statement 10 times) to get all the fields to update individually?
<?php
// File: ajax.php
// Ajax refresh hits
if(isset($_GET['refresh'])){
// Uses the get_page_views() function which takes an ID and retreives that page view count. The ID is passed by the AJAX script.
if($_GET['refresh'] == 'hits') echo get_page_views($_GET['id']);
};
?>
这州市的code到HTML页面。
This si the code to the HTML page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax - PHP example</title>
<script language="javascript" type="text/javascript" src="jquery-1.3.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
//ajax.php is called every second to get view count from server
var ajaxDelay = 1000;
setInterval(function(){
// Refresh details.
$('#zone-111').load('ajax.php?refresh=hits&id=111');
$(#zone-222').load('ajax.php?refresh=hits&id=222');
$(#zone-333').load('ajax.php?refresh=hits&id=333');
$(#zone-444').load('ajax.php?refresh=hits&id=444');
$(#zone-555').load('ajax.php?refresh=hits&id=555');
}, ajaxDelay);
});
</script>
</head>
<body>
<div align="center" id="zone-111">--</div>
<br />
<div align="center" id="zone-222">--</div>
<br />
<div align="center" id="zone-333">--</div>
<br />
<div align="center" id="zone-444">--</div>
<br />
<div align="center" id="zone-555">--</div>
<br />
</body>
</html>
我如何可以使这个脚本/ code更高效的任何建议，将不胜接受。
Any suggestion on how I can make this script/code more efficient would be greatly accepted.
亲切的问候，
P中。
推荐答案
在一次发送所有的IDS作为一个JSON数组。在服务器端，建立一个包含键/值对的IDS /计数的JSON对象。然后通过客户端上的按键循环，当你得到的结果，并设置依次在每个计数相关DIV。
Send all of the ids at once as a JSON array. On the server side, build a JSON object containing key/value pairs of the ids/counts. Then iterate through the keys on the client when you get the result and set each count in turn in the related DIV.
$(document).ready(function(){
//ajax.php is called every second to get view count from server
var ajaxDelay = 1000;
var ids = [];
$('[id^="zone-"]').each( function() {
ids.push( this.id );
});
setInterval(function(){
$.ajax({
url: 'ajax.php',
dataType: 'json',
type: 'get',
data: { refresh: 'hits', ids: ids },
success: function(data) {
for (var key in data) {
var div = $('#zone-' + key).html( data[key] );
}
}
});
}, ajaxDelay);
});
这篇关于jQuery的AJAX在同一个页面上的多个元素的实时更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
