Meh*_*ran 9 html javascript ajax perl jquery
我将如何更新在服务器上每隔几秒更新一次的图像,而用户必须点击刷新按钮,我的第一个猜测是ajax,但我之前并没有真正使用它.有人能指出我正确的方向吗?
编辑:忘了提到图像是由perl脚本生成的.gif文件 - 试图通过url抓取它返回一个脚本
gil*_*ly3 11
不需要AJAX,只需更新图像的src
属性即可.但是,由于它具有相同的URL,您必须为浏览器提供唯一的地址,以确保您不只是从浏览器的缓存中加载旧图像.您可以通过获取当前日期的序列号new Date().valueOf()
并将其作为查询字符串附加到URL 来保证唯一的图像.
$("#dynamicImage").prop("src", "dynamicImage.jpg?" + new Date().valueOf());
Run Code Online (Sandbox Code Playgroud)
您还可以使用new Date().getTime()
获取序列号,或者只是将日期强制转换为数字:+new Date()
要在计时器上使用它setInterval()
.这将是您可以放入页面中的脚本标记内的完整代码<head>
:
$(function() {
var intervalMS = 5000; // 5 seconds
setInterval(function() {
$("#dynamicImage").prop("src", "dynamicImage.jpg?" + +new Date());
}, intervalMS);
});
Run Code Online (Sandbox Code Playgroud)
做点什么
document.getElementById('yourimage').src = "url/of/image.jpg?random="+new Date().getTime();
这会更改图像标记的src属性(使用id"yourimage")并向其添加随机查询字符串,从而强制浏览器在每次更改图像时重新加载图像.
要每5秒重新加载一次图像,请执行以下操作:
window.setInterval(function() { document.getElementById('yourimage').src = "url/of/image.jpg?random="+new Date().getTime(); }, 5000);
您的 Perl 脚本似乎有问题。尝试通过 URL 访问图像无论如何都应该返回图像。它应该返回二进制数据而不是脚本。您还应该将响应的 Content-type 标头设置为 image/gif。在尝试修复 JavaScript 代码之前,请验证它是否确实返回二进制数据。