网页Ajax教程

 

图形验证码使用例子

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>图形验证码演示</title>
  <script src="js/jquery-3.2.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script type="text/javascript" src="layer/layer.js"></script>
</head>
<body>
  <form method="post" autocomplete="off">
      <div class="form-group">
        <div class="col-xs-6">
          <input id="imgcode" name="imgcode" type="text" maxlength="4" class="form-control" placeholder="图片验证码">
        </div>
        <div class="col-xs-6 text-left">
          <img src="" height="47" onclick="changeCode()">
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="form-group">
        <button class="btn btn-info" type="button" name="button" onclick="check()">校验验证码</button>
        <button class="btn btn-info" type="button" name="button" onclick="changeCode()">重新获取</button>
      </div>
    </form>
</body>
<script type="text/javascript">
  var picCodeKey;
  $(function(){
    changeCode()
  });
  function changeCode(){
    picCodeKey = Math.random();
    $("img").attr("src", "https://api.it120.cc/ajax/verification/pic/get?key=" + picCodeKey);
  }
  function check(){
    $.post("https://api.it120.cc/ajax/verification/pic/check",{key:picCodeKey, code: $("#imgcode").val()},function(a){
      if(a.code != 0){
        layer.alert("验证码错误");
        changeCode();
        return;
      }
      if(a.code == 0){
        layer.alert("匹配");
        changeCode();
        return;
      }
    });
    return false;
  }
</script>
</html>


效果展示: 点击预览


Copyright © 杭州于芯科技有限公司

QQ交流群:479413914

微信小程序api接口

浙ICP备15041833号