1

我的联系表单中有一个 div 标签，其中包含验证码项目。如果用户发现图像不可读，我希望刷新此部分。因此，我放置了一个用于启动刷新的图像链接。我希望更新特定的 div 而不是整个页面。我尝试了所有可能的上网方式，但是，它们对某些人不起作用，我宁愿在刷新按钮的底部重新加载整个页面。

我先用这个

<div id="captchadiv">
    <img src="http://localhost:8000/verifyimg.php" alt="Image verification" name="vimg" style="margin-left:87px" /><a id="refresh" href="#"><img src="images/refresh.jpg" height="40px" width="40px" alt="Refresh Captcha"/></a>
    <label class="text-form-long" style="margin-left:87px">To submit this form, please
    enter the characters you see in the image:
    <input type="text" size="12" name="imgverify" /></label>
</div><br><br>

<div class="buttons">
    <a href="#" class="button" data-type="reset">Clear Form</a>
    <a href="#" class="button" data-type="submit">Send Message</a>
</div>



<script> 
  $(function() {
     $("#refresh").click(function() {
            $("#captchadiv").load("contact.html");
        return false;
     });
  });
</script>

而这一秒，

<div id="captchadiv">
    <img src="http://localhost:8000/verifyimg.php" alt="Image verification" name="vimg" style="margin-left:87px" /><a id="refresh" href="#" onClick="refreshCaptcha"><img src="images/refresh.jpg" height="40px" width="40px" alt="Refresh Captcha"/></a>
    <label class="text-form-long" style="margin-left:87px">To submit this form, please
    enter the characters you see in the image:
    <input type="text" size="12" name="imgverify" /></label>
</div><br><br>

<div class="buttons">
    <a href="#" class="button" data-type="reset">Clear Form</a>
    <a href="#" class="button" data-type="submit">Send Message</a>
</div>

<script>
   function refreshcaptcha() {
       var container = document.getElementById("captchadiv");
       var refreshContent = container.innerHTML;
       container.innerHTML = refreshContent;
   }
</script>
4

1 回答 1

2

您将不得不使用AJAX或websockets获取异步更新，而无需重新加载页面。

阅读有关 AJAX 的更多信息

例子：

function refreshcaptcha() {
    $.ajax({
    type: "GET",
    url: "your server link to get new image",
    data: "",
    complete: function(data){
        // Read data to get the new image

        // Supposing the data contains your updated captcha content
        var container = document.getElementById("captchadiv");
        var refreshContent = data;
        container.innerHTML = refreshContent;
    }
});

更新

处理@Josso 的评论：

<script>
   function refreshcaptcha() {
       var image = document.getElementsByName("vimg")[0];
       image.setAttribute("src", "http://localhost:8000/verifyimg.php?"+(new Date()).getTime());
   }
</script>
于 2013-01-09T18:03:44.537 回答