使用AJAX显示php生成的图像
我有一个随机生成图像的PHP脚本。 像这样的东西：
我的HTML看起来像这样：
然后我有一个jquery文件处理单击按钮，以便在单击按钮时加载新的随机图像：
$(function(){ $('#button').click(function(){ $.ajax({ url: 'models/plugins/image.php', success: function(data){ $('#image').html('
') } }) }) })
我使用firebug，我可以看到该请求实际上已发送，并且响应已成功接收，但图像不会更改。
我做错了什么，如何解决这个问题？
我添加了另一个答案，因为我认为之前的答案都没有解决问题。 我认为，唯一想要的是在点击按钮时更新（！）图像。 所以不需要Ajax请求，只需重新加载图像即可。 您可以通过在图像的src属性中附加随机查询字符串来强制执行此操作。
$('#button').click(function() { var $image = $('#image'); var plainSrc = $image.attr('src').split("?")[0]; // disregard previous query string $image.attr('src', plainSrc + "?" + (new Date().getTime())); });
图像标记的src属性实际上需要URL而不是实际的JPEG数据。
试试这个：
$(function(){ $('#button').click(function(){ $('#image').attr('src', 'models/plugins/image.php?rand=' + Math.floor(Math.random()*1000) ); }); });
要使用src属性中的图像，您需要提供有效的URI，例如data-URI ：
我曾经为类似的问题编写了更详细的答案 。
生成的图像必须是base64编码才能包含在内。
所以你需要做以下事情：
- 编辑图像
- 在数据字符串中获取结果图像。
- 要获取图像字符串，您可以将其存储到文件系统并通过file_get_contents（）读取（对缓存很有用）或使用不带位置的imagejpeg（），这会将图像放在输出缓冲区中。 要从输出缓冲区获取值，请使用ob_start（）和ob_get_contents（）。
- 将图像的数据字符串转换为base64（使用base64_encode（））
- 将此字符串返回给浏览器
- 将图像“src”字段设置为“data：image / png; base64，[BASE64]”，其中[BASE64]是从PHP返回的字符串。
您正在调用的图像由浏览器缓存，使用图像URL末尾的查询字符串让浏览器显示新图像，并且不应使用缓存版本。
像这样的东西：
$(function(){ $('#button').click(function(){ $.ajax({ url: 'models/plugins/image.php?t='+((new Date).getTime()), success: function(data){ $('#image').html('') } }) }) })
而不是$('#image').html(' ，尝试')
$('#image').attr('src', data);