背景信息
我目前正在摆弄一些 PHP 和 AJAX,尝试让代码为自动刷新 div(每 10 秒)工作,其中包含评论。
这是我用来刷新 div 的 javascript 代码..
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false });
setInterval(function() {
$('#content_main').load('/feed_main.php');
}, 5000);
});
// ]]></script>
填充名为“content_main”的 div 的代码位于 feed_main.php 中,本质上是访问数据库并回显最新的评论...
问题
是否可以只加载 div“content_main”,如果其中的数据自上次加载后没有改变?
我的逻辑
因为我对 javascript 和 AJAX 比较陌生,所以我不太清楚该怎么做,但我的逻辑是:
第一次运行..
- 从 feed_main.php 文件加载数据
- 创建一个唯一值(也许是一个哈希值?)来识别比如说 3 个独特的评论
每隔一段时间运行一次...
- 从 feed_main.php 文件加载数据
- 创造新的独特值(value)
- 检查这个值与前一个值
- 如果它们相同,则不刷新 div,保持原样,但如果它们不同,则刷新..
之所以要这样做,是因为评论里一般都有图片,而且每次都要重新加载图片,很烦人。
如有任何帮助,我们将不胜感激。
最佳答案
不久前我遇到过类似的问题,我假设您使用 mysql 或其他东西作为您的评论存储服务器端?
我通过首先将时间戳整数列添加到我的 mysql 表来解决我的问题,然后当我添加一个新行时,我只是简单地使用 time()
来保存当前时间。
mysql 行插入示例:
$query = "INSERT INTO comments (name, text, timestamp) VALUES ('". $name ."', '". $text ."',". time() .");";
第二步是对您从服务器端发送的数据进行 json_encode:
$output = array();
if ($html && $html !== '') { // do we have any script output ?
$output['payload'] = $html; // your current script output would go in this variable
}
$output['time'] = time(); // so we know when did we last check for payload update
$json = json_encode($output, ((int)JSON_NUMERIC_CHECK)); // jsonify the array
echo $json; // send it to the client
因此,现在您的服务器端脚本将返回如下内容,而不是纯 html:
{
"payload":"<div class=\"name\">Derpin<\/div><div class=\"msg\">Foo Bar!<\/div>",
"time":1354167493
}
你可以很简单地用 javascript 抓取数据:
<script type="text/javascript"> // <![CDATA[
var lastcheck;
var content_main = $('#content_main');
pollTimer = setInterval(function() {
updateJson();
}, 10000);
function updateJson() {
var request = '/feed_main.php?timestamp='+ (lastcheck ? lastcheck : 0);
$.ajax({
url: request,
dataType: 'json',
async: false,
cache: false,
success: function(result) {
if (result.payload) { // new data
lastcheck = result.time; // update stored timestamp
content_main.html(result.payload + content_main.html()); // update html element
} else { // no new data, update only timestamp
lastcheck = result.time;
}
}
});
}
// ]]> </script>
这几乎负责服务器和客户端之间的通信,现在您只需像这样查询数据库:
$timestamp = 0;
$where = '';
if (isset($_GET['timestamp'])) {
$timestamp = your_arg_sanitizer($_GET['timestamp']);
}
if ($timestamp) {
$where = ' WHERE timestamp >= '.$timestamp;
}
$query = 'SELECT * FROM comments'. $where .' ORDER BY timestamp DESC;';
时间戳来回传递,客户端总是发送服务器在上一次查询中返回的时间戳。
您的服务器只发送自您上次检查后提交的评论,您可以像我一样将它们添加到 html 的末尾。 (警告:我没有为此添加任何类型的完整性控制,您的评论可能会变得非常长)
由于您每 10 秒轮询一次新数据,您可能需要考虑通过 ajax 调用发送纯数据以节省大量 block 带宽(仅包含时间戳的 json 字符串,只有大约 20 个字节)。
然后您可以使用 javascript 生成 html,它还具有将大量工作从服务器卸载到客户端的优点:)。您还可以更好地控制要同时显示的评论数量。
我做了一些相当大的假设,您将不得不修改代码以满足您的需要。如果你使用我的代码,而你的猫|电脑|房子碰巧爆炸了,你可以保留所有碎片:)
关于php - 刷新 div,但前提是 php 文件中有新内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13578579/