提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

bootstrap+jquery+ajax跨域实现短信验证码登录

BootstrapjQueryAJAX跨域 实现 登录 验证码 短信
2023-09-27 14:26:50 时间

文章目录


学习资源推荐 https://blog.csdn.net/qq_42813491/article/details/90213353

  • 微信扫码关注公众号 ：前端前端大前端，追求更精致的阅读体验 ，一起来学习啊
  • 关注后发送关键资料,免费获取一整套前端系统学习资料和老男孩python系列课程
    在这里插入图片描述

目录结构

在这里插入图片描述

效果图

在这里插入图片描述
*在这里插入图片描述

发送到注册手机的短信

*在这里插入图片描述

ajax回调函数返回的数据

在这里插入图片描述

  • 关于数据的解释由第三方数据接口提供

项目代码

  • 布局没什么说的，逻辑相关部分已经写了注释
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>表单注册</title>
  <style>
    html,
    body {
      height: 100%;
      overflow: hidden;
      font-family: '微软雅黑';
    }

    body {
      margin: 0;
      padding: 0;
      /* background-color: #F7F7F7; */
      background: url('./img/wallpaper.jpg') no-repeat center /100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    ul {
      margin: 0;
      padding: 50px;
      padding-top: 0px;
      list-style: none;
    }

    .register {
      width: 800px;
      background-color: #F9F9F9;
      border: 1px solid #CCC;
      border-radius: 5px;
    }

    li {
      display: flex;
      margin: 20px 0;
    }

    label,
    input {
      display: block;
      float: left;
      height: 46px;
      font-size: 24px;
      box-sizing: border-box;
      color: #333;
    }

    label {
      width: 200px;
      line-height: 46px;
      margin-right: 30px;
      text-align: right;
    }

    input {
      width: 320px;
      padding: 8px;
      line-height: 1;
      outline: none;
      position: relative;
    }

    input.code {
      width: 120px;
    }

    input.verify {
      width: 190px;
      margin-left: 10px;
    }

    input.disabled {
      background-color: #CCC !important;
      cursor: not-allowed !important;
    }

    input[type=button] {
      border: none;
      color: #FFF;
      background-color: #E64145;
      border-radius: 4px;
      cursor: pointer;
    }

    .tips {
      width: 100%;
      height: 40px;
      text-align: center;
    }

    .tips p {
      min-width: 300px;
      max-width: 400px;
      line-height: 40px;
      margin: 0 auto;
      color: #FFF;
      display: none;
      background-color: #C91623;
    }

    .submit:disabled {
      background-color: gray;
      cursor: not-allowed;
    }

    span {
      line-height: 46px;
      padding-left: 20px;
      font-size: 20px;
      color: yellowgreen;
      text-shadow: 0 0 20px yellowgreen;
    }
  </style>
</head>

<body>
  <div class="register">
    <div class="tips">
      <p>用户名不能为空</p>
    </div>
    <form id="ajaxForm">
      <ul>
        <li>
          <label for="">验证手机</label>
          <input type="text" name="mobile" class="mobile">
        </li>
        <li>
          <label for="">短信验证码</label>
          <input type="text" name="code" class="code">
          <input type="button" value="获取验证码" class="verify">
        </li>
        <li>
          <label for=""></label>
          <input type="button" class="submit" value="立即注册">
        </li>
      </ul>
    </form>
  </div>
  <!-- 提示信息 -->

</body>

</html>

<!-- 导入jQuery  -->
<script src="./js/jquery-1.12.4.min.js"></script>

<script>
  $('.verify').click(function () {

    var $phone = $('.mobile').val();//获取输入的电话号

    var n = parseInt(Math.random() * 10000) + 1000;//生成随机验证码，位数自己制定

    $(this).addClass("disabled");//点击获取验证码后，禁用该按钮，开始倒计时
    var time = 60;//倒计时时间，自定义
    var $this = $(this);//备份，定时器是异步的，此this非彼this
    var timer = setInterval(function () {
      time--;//开始倒计时
      if (time == 0) {//当倒计时为0秒时，关闭定时器，更改按钮显示文本并设置为可以点击
        clearInterval(timer);
        $this.val('获取验证码');
        $this.removeClass("disabled");
        return;
      }
      $this.val('还剩' + time + "S");//显示剩余秒数


    }, 1000);//定时器一秒走一次，每次减一，就是倒计时了



    $.get('http://api.jisuapi.com/sms/send', {//极速数据接口，第三方数据接口，下边我会介绍简单使用的
        mobile: $phone,
        content: "尊敬的会员，您的验证码:" + n + "。您正在注册，10分钟内有效。【黑马程序员】",//短信模板内容，除验证码外固定
        appkey: "your appkey"//你在第三方数据接口注册后，系统分配给你的秘钥
      },
      function (data) {
        //console.log(data);返回的数据，测试用
        //下边是简单的注册，重点是发短信，不是这里

        if(data.msg!="ok"){return;}
        $('.submit').click(function () {

          if ($('.code').val() == n) {
            alert('注册成功')
          } else {
            alert('验证码错误')
          }
        })

      }, 'jsonp');//设施访问合适， jsonp，这个不是你决定的，服务端决定，实际开发看后台给的接口文档


  });
</script>

关于第三方数据接口的接入

  • 我们能看到的一些基本服务，差不多都是一个接口的事，并不复杂
  • 比如天气预报，短信，ip查询，身份证号查询，手机归属地，火车票等等…
  • 提供数据的平台很多，我推荐极速数据
  • 在这里插入图片描述
  • 再次说明，第三方数据接口并不神秘，注册后部分免费，第三方，你懂得
  • 下面介绍一下短信数据接口的使用（也可以直接看官网的demo）
  • 在这里插入图片描述
  • 前10条短信免费，测试用差不多吧，后续使用需要购买，公司里这笔钱不会你出的，放心
  • 下边是示例代码，不同语言大同小异，官网给了php，python，java三种
  • 在这里插入图片描述
  • 短信使用需要在短信管理界面添加模板和建立子账号，进去看就会了，很简单
  • 发短信必须用审核过的短信模板

相关文章