通过 jQuery AJAX 请求更新图像答案

【问题标题】：Update image through jQuery AJAX request通过 jQuery AJAX 请求更新图像
【发布时间】：2012-10-28 07:22:31
【问题描述】：

我有一个使用 imagick PHP 扩展创建和图像的 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 属性（如上）。这只是将图像的原始字符串值写入属性并且不会更新。我将如何正确更新图像？

【问题讨论】：

你确定成功回调真的执行了吗？你有没有放一个断点来看看output是什么？如果是 - 返回的输出是什么？
我使用 Chrome 开发工具检查了响应，它是一长串混乱的字符和问号（我假设是原始图像）。这也是插入到 img src 标签中的内容。
请注意，创建的 imagick 对象永远不会被保存，它只是在脚本中构建后回显，在页面加载时工作正常。
你的问题不是刷新内容吗？ stackoverflow.com/questions/1997901/…
我不这么认为，我遇到的问题是“输出”是原始图像字符串，我正在用这个更新 src 属性。这不起作用，所以我想知道如何使用此特定输出更新图像。

标签： ajax imagick

【解决方案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());             
             }
    });

});

【讨论】：