使用 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. 仅当其中一个字段发生更改时，“结果”字段才会更新。我可以在点击提交按钮时更新它吗？
3. 我想在 color.php 计算图片时显示一个旋转的 load.gif。我这样尝试过，没有成功：

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，强制刷新图像。要使用加载器，只需使用属性 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>