使用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()));
});