使用jQuery Ajax更新動態創建的圖像通過GET

Question

我目前的工作情況看起來是這樣的：

<!-- collect user info --> 
<form method="GET"> 
    <input name="param1" type="text" /> 
    <input name="param2" type="text" /> 
    <input type="submit" /> 
</form> 

<!-- display image based on user info --> 
<img src="color.php?param1=<?php echo $_GET['param1']; ?>param2=<?php echo $_GET['param2']; ?>" alt="" /> 

這是可以正常使用。現在我只希望圖片被ajax更新，而其餘的HTML保持不變。我試過這個：

<form method="GET" id="formId"> 
    <input name="param1" type="text" /> 
    <input name="param2" type="text" /> 
    <input type="submit" /> 
</form> 

<div id="result"></div> 

<script type="text/javascript"> 
    var frm = $('#formId'); 
    frm.submit(function(){ 
     $.ajax({ 
      type: 'GET', 
      success: function() { 
       $('#result').html('<img src="color.php?' + frm.serialize() + '" />'); 
      } 
     }); 
     return false; 
    }); 
</script> 

事實上，這個解決方案或多或少有效。然而，我在這裏有一些問題：

1. 這是很好的jQuery/ajax代碼或是愚蠢的（是的，我是新來的jQuery）？
2. 只有其中一個字段發生更改時，字段「result」纔會更新。我可以在提交按鈕被點擊時更新它嗎？
3. 我想顯示一個旋轉load.gif而color.php計算圖片。我嘗試了這種方式，沒有成功：

var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />"; 
$('#result').html(ajax_load).html('<img src="color.php?' + frm.serialize() + '" />'); 

謝謝！

Answer 1

給jQuery ajax調用添加參數cache：false，強制刷新圖像。要使用加載器，只需使用attributo src。複製/粘貼代碼：

<form method="GET" id="formId"> 
    <input name="param1" type="text" /> 
    <input name="param2" type="text" /> 
    <input type="submit" /> 
</form> 

<div id="result"> 
    <img id="preview" src="img/load.gif" /> 
</div> 

<script type="text/javascript"> 
    var frm = $('#formId'); 
    frm.submit(function(){ 
     $('#preview').attr('src', 'img/load.gif'); 
     $('#preview').attr('src', 'color.php?' + frm.serialize() + '&_' + new Date().getTime()); 
     return false; 
    }); 
</script>