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

文章目录

    • 目录结构
    • 效果图
    • 发送到注册手机的短信
    • ajax回调函数返回的数据
    • 项目代码
    • 关于第三方数据接口的接入

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


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

目录结构

bootstrap+jquery+ajax跨域实现短信验证码登录_第1张图片

效果图

bootstrap+jquery+ajax跨域实现短信验证码登录_第2张图片
*bootstrap+jquery+ajax跨域实现短信验证码登录_第3张图片

发送到注册手机的短信

*bootstrap+jquery+ajax跨域实现短信验证码登录_第4张图片

ajax回调函数返回的数据

bootstrap+jquery+ajax跨域实现短信验证码登录_第5张图片

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

项目代码

  • 布局没什么说的,逻辑相关部分已经写了注释

<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>


<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查询,身份证号查询,手机归属地,火车票等等…
  • 提供数据的平台很多,我推荐极速数据
  • bootstrap+jquery+ajax跨域实现短信验证码登录_第6张图片
  • 再次说明,第三方数据接口并不神秘,注册后部分免费,第三方,你懂得
  • 下面介绍一下短信数据接口的使用(也可以直接看官网的demo)
  • bootstrap+jquery+ajax跨域实现短信验证码登录_第7张图片
  • 前10条短信免费,测试用差不多吧,后续使用需要购买,公司里这笔钱不会你出的,放心
  • 下边是示例代码,不同语言大同小异,官网给了php,python,java三种
  • bootstrap+jquery+ajax跨域实现短信验证码登录_第8张图片
  • 短信使用需要在短信管理界面添加模板和建立子账号,进去看就会了,很简单
  • 发短信必须用审核过的短信模板

你可能感兴趣的:(ajax)