我目前的工作情况是这样的:
<!-- 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。我这样试过,没有成功:
var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />"; $('#result').html(ajax_load).html('<img src="color.php?' + frm.serialize() + '" />');
谢谢!
最佳答案
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>
关于php - 使用 jquery ajax 通过 GET 更新动态创建的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16498278/