ajax - 通过 jQuery AJAX 请求更新图像

Question

我有一个 PHP 脚本，它使用 imagick PHP 扩展创建和图像。我在页面加载时显示图像，如下所示：

<img id="myImage" src="php/image-script.php" />

PHP 脚本通过回显脚本中内置的 imagick 图像对象结束：

echo 'myImage';

这一切都适用于页面加载。我现在添加了一个 jQuery AJAX 请求，该请求在跳出输入框时触发。然后通过查询字符串将输入框的值传递给 image-script.php，如下所示：

    $('#inputHeight').on('blur', function(){

    var $height = $('#inputHeight').val(); 

        $.ajax({ url: './php/preview-image.php?h=' + $height,
             type: 'post',
             success: function(output) {
                $('#preview').attr('src', output);             
             }

        });

    });

我的问题在于 AJAX 请求的成功功能。目前我正在使用输出更新 img src 属性（如上）。这只是将图像的原始字符串值写入属性并且不会更新。我将如何正确更新图像？

Answer 1

我找到了一个解决方案，虽然我不确定它是否完全正确，因为我似乎两次调用了我的 preview-image.php 脚本？首先在 URL 中，然后在 Success 函数中。这是更新的代码：

$('#inputHeight').on('blur', function(){

    var $width = 550;
    var $height = $('#inputHeight').val(); 

        $.ajax({ url: './php/preview-image.php?w=' + $width + '&h=' + $height,
             type: 'post',
             success: function(output) {
                $('#preview').attr('src', 'php/preview-image.php?w=' + $width + '&h=' + $height + '&' + Math.random());             
             }
    });

});