微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

php-使用jquery ajax通过GET更新动态创建的图像

我当前的工作情况如下所示:

<!-- 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>

实际上,该解决方案或多或少地起作用.但是,我这里有一些问题:

>这是不错的jquery / ajax代码还是愚蠢的(是的,我是jquery新手)?
>仅当其中一个字段更改时,“结果”字段才会更新.每当单击“提交”按钮时,我都可以更新它吗?
>我想在color.PHP计算图片显示旋转的load.gif.我以这种方式尝试过,但没有成功:

06002

谢谢!

解决方法:

向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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐