JQuery 刷新验证码实现程序

JQuery

1个成员

JQuery 刷新验证码实现程序

发表于 2017-02-15 • 3358 次查看

本文章总结了多种利用刷新验证码的javascript与jquery代码,并且兼容ie,ff这类浏览器，有需要的朋友可参考参考。

Html代码：

代码如下	复制代码
<span id="checkCode"> </span> <a id="notClear" href="javascript：void(0)">看不清？</a>

javascript

代码如下	复制代码
<img src="../inc/ver.php" onclick="this.src='../inc/ver.php';" />

Jquery:

方法一（ie无效，ff有效）：

代码如下	复制代码
$("#checkCode").html("<img src=checkCode.php?r="+Math.random()+" />"); $("#notClear").click(function(){ $("#checkCode").html("<img src=checkCode.php?r="+Math.random()+" />"); });

方法二（ie，ff均有效）：

代码如下	复制代码
$("#checkCode").empty().append("<img src=¹checkCode.php¹ />"); $("#notClear").click(function(){ $.post("checkCode.php?r="+Math.random(),function(data){ $("#checkCode").empty().append("<img src=¹checkCode.php?r="+Math.random()+"¹ width=¹44¹ height=¹18¹ />"); }); });

方法三（全面支持）

代码如下

复制代码

function isRightCode(){
var code = $("#veryCode").attr("value");
code = "c=" + code;
$.ajax({
  type:"POST",
  url:"resultServlet",
  data:code,
  success:callback
});
}

function callback(data){
$("#info").html(data);
}

html页面

代码如下

复制代码

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/verifyCode.js"></script>
        <script type="text/javascript" src="js/jquery.js"></script>
        <title>test verify code</title>
    </head>
    <body>
        <input id="veryCode" name="veryCode" type="text"/>
        <img id="imgObj" alt="" src="verifyCodeServlet"/>
        <a href="#" onclick="changeImg()">换一张</a>
        <input type="button" value="验证" onclick="isRightCode()"/>
        <div id="info"></div>
    </body>
</html>