javascript修改IMG标签的SRC实现验证码火狐不正常

本文介绍了一种解决网页中验证码图片在某些浏览器下不自动刷新的方法。通过在图片请求URL后添加随机数参数的方式,避免了浏览器缓存导致的图片不更新问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

javascript修改IMG标签的SRC实现验证码时,IE正常,火狐和google出状况
1.当点击某一按钮的时候,把图片域中的图片改变一下
    <img id="randimg" src="/servlet/CreateValidateNum" width="60" height="20" />
    <span style="cursor:hand" onclick="reflush();return false;">看不清</span>
    <script>
        function reflush()
        {
            document.getElementById(randimg).src="/servlet/CreateValidateNum";
        }
    </script>

2.说明
    ”servlet/CreateValidateNum“是JAVA写的servlet。该servlet是打印出图片

3.出现的问题

    在IE6下面图片修改正常,但在IE7和Firefox下面却不刷新

4.情况分析
    如果新的图片跟旧的图片地址不一样,效果是会出来的。即:图片有发生改变。
    但像”验证码“这种功能。新旧图片的地址是一样的。
    鉴于上述情况,怀疑有可能是因为图片地址是一样的,而导致浏览器自动读缓存。

5.解决方法
    把javascript改成这样即可:
    document.getElementById(randimg).src="/servlet/CreateValidateNum?"+Math.random();
    即:每次的访问地址都不一样,因为有加随机数。所以问题解决
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>1-用户登录</title> <style type="text/css"> a{text-decoration:none} body{ background-image:url(../img/longmao.webp); background-size: cover; height: 100vh; } h3{ color:#FFF; font-size:30px; } td{ color:#FFF; font-size:20px; } .ps{ padding-top:0px; } </style> <script type="text/javascript"> function refreshVerifyCode() { // 刷新验证码 var verifyCodeImage = document.getElementById("verify_codeImage"); verifyCodeImage.src = "../VerifyCodeServlet?" + Math.random(); } function register() { window.location.href = "register.jsp"; } </script> </head> <body > <h3>新闻发布系统>>用户管理>>登录</h3><hr color="#FFF"> <div class="ps"> <form action="../LoginSerlvet" method="post" name="frm_login"> <table align="center"> <tr> <td>用户名:</td> <td> <input type="text" name="userName"value="张凯"> </td> </tr> <tr> <td>密码:</td> <td> <input type="password" name="userPassword" value="1111"> </td> </tr> <tr> <td>验证码:</td> <td> <input type="text" name="verifyCode" value=""> <img src="../VerifyCodeServlet?t=<%=System.currentTimeMillis()%>" id="checkcode" onclick="this.src='../VerifyCodeServlet?t='+new Date().getTime()"/> </td> </tr> <tr> <td height="50" colspan="2" align="center"> <input type="submit" name="ok" value="提交"> <input type="reset" name="cancel" value="取消"> <input type="button" onclick="register();" value="注册"> </td> </tr> </table> </form> </div> </body> </html>加一个3.Ajax异步验证。登录时账号输完马上显示账号重复了。
06-08
好的,你的要求是在这段代码中加入一个 Ajax 异步验证,当用户输入账号时,立即检测账号是否已存在,并给出相应提示。我给你提供一种实现方式,你可以将以下代码插入到 `<head>` 标签中: ``` <script type="text/javascript"> function checkUsername() { var xmlHttp; try { xmlHttp = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari } catch (e) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("您的浏览器支持AJAX!"); return false; } } } xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4) { var responseText = xmlHttp.responseText; if (responseText == "0") { document.getElementById("username_message").innerHTML = "该账号已存在,请重新输入"; } else { document.getElementById("username_message").innerHTML = ""; } } }; var username = document.getElementById("username").value; xmlHttp.open("POST", "../CheckUsernameServlet", true); xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlHttp.send("username=" + username); } </script> ``` 然后,在用户名输入框中加入 onblur 事件,调用 checkUsername() 函数进行账号验证。同时,在页面中加入一个 `<span>` 标签,用于显示账号是否重复的提示信息。修改后的代码如下: ``` <tr> <td>用户名:</td> <td> <input type="text" name="userName" id="username" value="张凯" onblur="checkUsername()"> <span id="username_message"></span> </td> </tr> ``` 最后,在服务器端编写一个 CheckUsernameServlet,用于接收客户端发来的账号信息,检查账号是否已存在,然后将结果返回给客户端。这个部分的代码需要根据你的具体情况进行编写,这里再赘述。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值