Question

我正在尝试实现以下代码：

verify.html：

<input type="text" id="vericode" style="position:relative;top:-3px;width:70px;height:20px;border:1px solid #928b8b" name="verif_box">
<IMG style="position:relative;top:5px;margin-left:5px;" SRC="image.php">
    <a href="#" id="change">change to another one</a>

<script>
    $(document).ready(function(){ 
        $("#change").click(function(e){
            e.preventDefaut();
            //not sure how to load the image.php again?
        }
   });
</script>

我想在点击“更改为另一个”时更改验证码，而不是不确定如何重新加载image.php，每次刷新verify.html时，验证码都会更改为新的，但我希望每次都不刷新页面就改变它，任何人都可以帮我解决这个问题，非常感谢你的帮助。

Answer 1

您可以通过修改img的src属性并添加时间戳来重新加载图像，因此链接将是唯一的，并且不会使用缓存版本。

$("#change").click(function(e){
  e.preventDefaut();
  $("img").attr('src', 'image.php?ts=' + new Date().getTime());
}

请为要加载的图片添加id属性，以便您可以使用$("#imgID")。

Answer 2

我会以不同方式解决问题并通过ajax调用image.php文件，将div的内容替换为该调用返回的图像。

如果您对此方法感到满意，this other stack overflow问题可以帮助您。

Answer 3

html也有一些错误。

<input type="text" id="vericode" style="position:relative;top:-3px;width:70px;height:20px;border:1px solid #928b8b" name="verif_box" />
<IMG style="position:relative;top:5px;margin-left:5px;" SRC="image.php" /> 
    <a href="#" id="change">change to another one</a>

<script>
    $(document).ready(function(){ 
        $("#change").click(function(e){
            e.preventDefaut();
            $("img[style="position:relative;top:5px;margin-left:5px;"]").attr('src','new_image.php').load();
        }
   });
</script>

Answer 4

试试这个：

HTML：

<img id="myImage" src="handler.php" alt="" />
<a id="change" href="#" title="change">change image</a>

Jquery的：

<script type="text/javascript">
$(document).ready(function(){ 
$("#change").click(function(e){
 e.preventDefaut();
 var hUrl = "handler.php"
 $("#myImage").attr('src', (hUrl + getRandomQueryString()));
 });//click

});//ready

//avoid cache :
function getRandomQueryString()
{
  return "&Id=" + Math.round(new Date().getTime() / 1000);
}

使用ajax更改验证码

4 个答案: