通过jQuery AJAX请求更新图片

我有一个PHP脚本，使用imagick PHP扩展创建和图像。我显示在页面加载图像，像这样：通过jQuery AJAX请求更新图片

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

PHP脚本呼应内置在脚本中imagick图像对象结束：

echo 'myImage';

这一切工作在页面加载的罚款。我现在添加了一个jQuery AJAX请求，它在从输入框中跳出时触发。输入框的值，然后通过对图像的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属性（如上所述）。这只是将图像的原始字符串值写入属性，并且不会更新。我将如何正确地更新图像？

来源

2012-10-27 Ronnie

你确定成功回调真的执行吗？你有没有在那里设置一个断点来看看'output'是什么？如果是 - 输出结果是什么？ – Reflective

我检查了使用Chrome deve工具的响应，它是一串混乱的字符和问号（我假设原始图像）。这也是插入到img src标签中的内容。 – Ronnie

只需要注意，创建的imagick对象永远不会被保存，只需在脚本中生成后对其进行回显，该功能在加载页面时效果很好。 – Ronnie

我找到了一个解决方案，但我不确定它是否完全正确，因为我似乎在调用我的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());    
      } 
    }); 

});

来源

2012-10-27 23:22:31 Ronnie

通过jQuery AJAX请求更新图片

回答

相关问题