我一直在用PHP编写一些休息应用程序。应用程序通过 REST 从服务器下载图像，并返回 html 代码以将该图像添加到网页。这是 php 代码（图像.php文件）的示例：
include 'Camera.php';
include 'Image.php';
include 'httpful.phar';
$c = new Camera();//new Camera object
$c ->getCameras();//get array of all cameras
$img = new Image(); //new Image object
$n = count(Camera::$cameralist); //lenght of array
for ($index = 0; $index < $n; $index++) {
echo '<img id="refresh" src="' . $img->getImage($index) . '">'; //show all images
}
索引.php文件是主页文件。它可以显示图像并每 5 秒刷新一次。我已经完成了一半的工作。图为图。但是，如果我想使用 javascript 刷新它，则刷新仅 php 代码而不是我可以看到的图像。
<html>
<head>
<meta charset="UTF-8">
<title>Camera Service</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="refresh">
</div>
</body>
<script type="text/javascript">
setInterval("moja_funkcja();",5000);
function moja_funkcja(){
$('#refresh').load('images.php');
}
</script>
</html>
此代码中有什么变化？我希望它会工作提前致谢
一种可能的解决方案是获取所有图像网址（src属性），然后通过附加时间戳来更新图片网址，即
<img src="/camera1.jpg">
将成为
<img src="/camera1.jpg?t=1457915755"> <img src="/camera1.jpg?t=1457915760">
依此类推，浏览器将重新加载图像。我任意选择了参数名称"t"，您可以随心所欲地命名它。
在提供图像的服务器端使用Cache-Control有更好的方法，请检查此答案：在同一 url 中使用新图像刷新图像
<html>
<head>
<meta charset="UTF-8">
<title>Camera Service</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function() {
// load images initially to get the "src" attribute
$('#refresh').load('images.php', function() {
// images loaded
$('#refresh').find('img').each(function() {
// store original src attribute
$(this).data('original-src', $(this).attr('src'));
});
// every 5 seconds, update the src with a new timestamp
setInterval(function() {
$('#refresh').find('img').each(function() {
var src = $(this).data('original-src');
// if there's already a query string we need to append with &
src += (src.indexOf("?") === -1) ? '?' : '&';
// our parameter is named "t", this will change with time,
// so the browser will reload the image.
src += 't=' + new Date().getTime();
// update the image src
$(this).attr('src', src);
})
},5000);
})
});
</script>
</head>
<body>
<div id="refresh"></div>
</body>
</html>
如果你只需要刷新内容，即重新获取PHP脚本 - 这变得简单得多，你只需将时间戳附加到PHP脚本的URL中：
<html>
<head>
<meta charset="UTF-8">
<title>Camera Service</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function loadImages() {
$('#refresh').load('images.php?' + new Date().getTime(), function() {
// call "recursively" once fetched
setTimeout(loadImages, 5000);
});
};
// trigger first fetch once page is loaded
$(function() {
loadImages();
});
</script>
</head>
<body>
<div id="refresh"></div>
</body>
</html>
如果您只想刷新 PHP 脚本的输出，第三个选项是在服务器端和客户端禁用缓存，这样您就不必使用 URL：
.PHP：
include 'Camera.php';
include 'Image.php';
include 'httpful.phar';
$c = new Camera();//new Camera object
$c ->getCameras();//get array of all cameras
$img = new Image(); //new Image object
$n = count(Camera::$cameralist); //lenght of array
// this must happen before you output any content
header("cache-control: no-cache");
for ($index = 0; $index < $n; $index++) {
echo '<img id="refresh" src="' . $img->getImage($index) . '">'; //show all images
}
.HTML：
<html>
<head>
<meta charset="UTF-8">
<title>Camera Service</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function loadImages() {
$.ajax({
url: "images.php",
cache: false, // disables caching!
dataType: "html",
success: function(data) {
$("#refresh").html(data);
setTimeout(loadImages, 5000);
}
});
};
// trigger first fetch once page is loaded
$(function() {
loadImages();
});
</script>
</head>
<body>
<div id="refresh"></div>
</body>
</html>