通過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請求更新圖片

回答

相關問題