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 に答える