Question

我的联系表单中有一个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>

Answer 1

您必须使用AJAX或websockets来获取异步更新，而无需重新加载页面。

Read more about 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>

需要刷新包含联系人表单中的验证码的div，而无需刷新整个页面

1 个答案: