gpt4 book ai didi

php - jQuery AJAX 实时更新同一页面上的多个元素

转载 作者:行者123 更新时间:2023-12-01 07:02:45 25 4
gpt4 key购买 nike

我正在研究一些 AJAX,并且正在尝试利用 jQuery。

我有一个索引页,它链接到多个页面,每个页面旁边是查看次数。

我希望 View 计数每隔几秒刷新并自动更新一次,以便页面上的用户可以查看页面计数的实时更新。

我遇到过以下脚本,该脚本基于页面上的单个 Ajax 元素运行良好,但是如果有 10 个或更多元素呢?

是否有更有效的方法(无需剪切和粘贴语句 10 次)来单独更新所有字段?

<?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']);
};
?>

这是 HTML 页面的代码。

<!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>

任何有关如何使此脚本/代码更高效的建议都将被广泛接受。

亲切的问候,

P。

最佳答案

一次性以 JSON 数组的形式发送所有 id。在服务器端,构建一个包含 ids/counts 的键/值对的 JSON 对象。然后得到结果后就迭代客户端上的key,并在相关的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);
});

关于php - jQuery AJAX 实时更新同一页面上的多个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1277161/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com