Question

我想创建一个登录页面。所以我在登录表单中放了一张验证码图片，其中包含以下html代码：

<img name="captcha" id="captcha" src="captcha/CaptchaSecurityImages.php?width=90&height=28&characters=5"/>

我按下了一个按钮，用户可以点击这个按钮来更改验证码，如果它不可读，如下所示：

<input type="button" name="new_Captcha_button" onClick="new_captcha()"/>

我写了一个脚本，如下所示，只在chrome中工作：

<script type="text/javascript">
function new_captcha()
    {   
        document.images["captcha"].src = "captcha/CaptchaSecurityImages.php?width=90&height=28&characters=5";
    }
</script>

但它在其他浏览器中不起作用，所以我用以下代码替换了以前的代码：

<script type="text/javascript">
function new_captcha()
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("captcha").src = xmlhttp.responseText;
            }
          }
        xmlhttp.open("GET","captcha/CaptchaSecurityImages.php?width=90&height=28&characters=5",true);
        xmlhttp.send();
    }

因此，请告诉我在代码中需要做些哪些更改才能使其正确无误。我想我需要改变以下几行：

document.getElementById("captcha").src = xmlhttp.responseText;

非常感谢。

Answer 1

<script type="text/javascript">
function new_captcha()
    {   
        document.getElementById('captcha').src = 'captcha/CaptchaSecurityImages.php?width=90&height=28&characters=5&_t=' + Math.random(1);
    }
</script>

不需要使用ajax，函数new_captcha（）就可以了。

Answer 2

您可以尝试这样做

的login.php

<div id="captcha_container"></div>
<input type="button" id="btn_recaptcha" value="Recaptcha">

<script>
function ajax_loadpage(loadUrl,output_container)
    {
        $.post
        (
            loadUrl,
            {language: "php", version: 5},function(responseText){$(output_container).html(responseText);},"html"
        );
    }

ajax_loadpage("captcha_page.php","#captcha_container");

$('#btn_recaptcha').click(function(){
   ajax_loadpage("captcha_page.php","#captcha_container");
})
</script>
______________________________________________________________________________________
captcha_page.php
<img width="212" height="53" src="captcha.php">

captcha.php包含我的验证码，它包含一个header ("Content-type: image/gif");代码，所以我需要一个额外的php文件，我可以保存图像文件，因此使用我的captcha_page.php。为我工作:)）

使用AJAX更改图像

2 个答案: