网页Ajax教程

 

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" onsubmit="return checkFormMan(this)">
    <div class="form-group form-group-lg">
      <input id="mobile" name="mobile" type="text" maxlength="11" class="form-control" placeholder="请输入手机号码">
    </div>
    <div class="form-group form-group-lg">
      <input name="nick" type="text" class="form-control" placeholder="请输入您的姓名">
    </div>
    <div class="form-group form-group-lg">
      <div class="col-xs-6" style="padding-left:0px;">
        <input id="imgcode" name="imgcode" type="text" maxlength="4" class="form-control" placeholder="图片验证码">
      </div>
      <div class="col-xs-6 text-left">
        <img id="codeImg" height="47" onclick="changeCode()">
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="form-group form-group-lg" style="height:47px;clear: both;">
      <div class="col-xs-6" style="padding-left:0px;">
        <input name="code" type="text" maxlength="4" class="form-control" placeholder="手机验证码">
      </div>
      <div class="col-xs-6 text-left">
        <input id="getSmsCodeButton" type="button" class="btn btn-lg btn-warning" value="获取验证码" onclick="getSmsCode()" style="margin-top:0px;">
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="form-group form-group-lg">
      <input name="pwd" type="password" class="form-control" placeholder="设置您的密码" autocomplete="new-password">
    </div>
    <div class="form-group">
      <input type="submit" class="btn-block btn btn-lg btn-info" value="立即注册">
    </div>
    <p>&nbsp;</p>
    <a href="/login" class="btn-block btn btn-default">我已有账号,直接登录</a>
  </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 checkFormMan(obj){
    $.post("https://api.it120.cc/ajax/user/m/register",$(obj).serialize(),function(a){
      if(a.code == 0){
        layer.alert('注册成功!');
      }else{
        layer.alert(a.msg);
      }
    });
    return false;
  }
  function getSmsCode(){
    var mobile = $.trim($("#mobile").val());
    var imgcode = $.trim($("#imgcode").val());
    if (mobile == "") {
      layer.msg("请输入手机号码");
      return;
    }
    if (imgcode == "") {
      layer.msg("请输入图形验证码");
      return;
    }
    $.post("https://api.it120.cc/ajax/verification/sms/get",{mobile:mobile, key:picCodeKey, picCode:imgcode, rnd:Math.random()},function(a){
      if(a.code == 502){
        layer.msg("图片验证码错误");
        changeCode();
        return;
      }
      if(a.code == 503){
        layer.msg("同一个手机号每日发送验证码超过限制");
        changeCode();
        return;
      }
      if(a.code == 5001){
        layer.msg("发送间隔不能短于1分钟");
        changeCode();
        return;
      }
      if(a.code == 0){
        layer.msg("验证码已发送至您的手机,请注意查收");
        daojishi();
      }else{
        layer.alert(a.msg);
        changeCode();
      }
    });
  }
  var daojishiLeftSeconds = 60;
  function daojishi(){
    $("#getSmsCodeButton").prop("disabled", true);
    daojishiLeftSeconds--;
    $("#getSmsCodeButton").val(daojishiLeftSeconds + ' 秒后重新获取');
    if (daojishiLeftSeconds <= 0) {
      $("#getSmsCodeButton").prop("disabled", false);
      daojishiLeftSeconds = 60;
      $("#getSmsCodeButton").val('获取验证码');
      return;
    }
    setTimeout(daojishi,1000);
  }
</script>
</html>


效果展示: 点击预览

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

QQ交流群:479413914

微信小程序api接口

浙ICP备15041833号