php - 使用AJAX显示php生成的图像

Question

我有一个随机生成图像的 php 脚本。像这样的事情:

<?php
$image = imagecreatetruecolor(400,200);

// process image

// rendering image
header("Content-type: image/jpeg");
imagejpeg($image);
?>

我的 html 看起来像这样:

<img id="image" src="/models/plugins/image.php"/>
<button id="button">Get new image</button></body>

然后我有一个 jquery 文件来处理按钮的点击，以便在单击按钮时加载新的随机图像:

$(function(){
    $('#button').click(function(){
        $.ajax({
            url: 'models/plugins/image.php',
            success: function(data){
                $('#image').html('<img src="' + data + '">')
            }
        })
    })
})

我使用firebug，我可以看到请求实际上已发送并且响应已成功接收，但图像没有改变。

我做错了什么以及如何解决这个问题？

Answer 1

我添加了另一个答案，因为我认为之前的答案都没有解决问题。我认为，OP 唯一想要的就是在单击按钮时更新(!)图像。所以不需要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()));
});