注册页面手机验证码无跳转接收[html+js+ajax+php]

【学习笔记】

　　来源：注册时需要使用短信验证码，但是注册的时候，点击接收验证码时，会产生跳转（尼玛，这不是我想要的啊！o(╥﹏╥)o）

　　　　　查询资料和看书之后，知道使用js+ajax可以实现，就从网上找了一些博客的资料来看，最后写出了可以实现需求的代码。

　　主要参考方法：https://blog.csdn.net/isabellazheng1991/article/details/53543925

　　　　　　　　　https://q.cnblogs.com/q/45695/

【解决方法】

　　　　　

　　　　1个html页面,2个php页面,一个用于发送验证码一个用于验证,分开一是便于理解,二是防止点击注册时造成验证码反复产生,实际中写两个方法即可

　　　　　短信接入平台为容联云

1.register.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html">
<meta charset="utf-16">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>手机验证</title>
<link rel="stylesheet" type="text/css" href="register.css">
<script src="./jquery.min.js"></script>
<style type="text/css">
body{
font-family:arial;
font-style:normal;
font-weight:normal;
font-size:16px;
}

#table1 td:nth-of-type(3) input{
width:250px;
height:35px;
}

#table1 td:nth-of-type(4){
font-size:12px;
color:red;
}

#table2{
border:0;
width:300px;}

button{
width:120px;
height:40px;
color:white;
background-color:rgb(2, 114, 188);
border-radius:10%;

}

</style>
<script>
  function SendMsm(){
   //单独处理发送短信的验证
    s=document.getElementById("code_td");
    var phone=document.getElementById("phone").value;
    function vertiCodeSend(){
      $.ajax({
      url:"sendMes.php",  //发送验证码的php页面
      data:{"phone":phone},//传入后台
      type:"POST",//类型
      });
    }
  if(phone==""){s.innerHTML="请先输入手机号码";}
  else{vertiCodeSend();s.innerHTML="";}
  }

</script>
</head>
<body>

<div>
  <form  method="post" action="checkCode.php">
    <table id="table1">
    <tbody>
    <tr>
      <td><label for="phone">手机号码：</label></td>
      <td></td>
      <td>
        <input id="phone" type="text" name="phone" maxlength="11"></td>
    </tr>
    <tr>
      <td><label>手机验证码</label></td>
      <td></td>
      <td>
        <input  type="text" name="userCode" style="width:150px;"  >
        <input  type="button" style="width:100px;font-size:14px;" value="获取验证码" onclick="SendMsm()">
      </td>
      <td id="code_td"></td>
    </tr>
    </tbody>
    </table>
    <table id="table2">
    <tbody>
    <tr>
      <th><button type="submit" name="submit" value="注册">注册</button></th>
      <th><button type="reset">重置</button></th>
    </tr>
    </tbody>
    </table>
  </form>
</div>

</body>
</html>

2.sendMes.php

<?php

 session_start();

   // 产生4位随机数
    $str = rand(1000, 9999);

    // 新建变量接收
    $authCode=$str;

    // 删除上次的缓存
    unset( $_SESSION['authCodeS']);

    //给session中的authCodeS变量赋值
    $_SESSION['authCodeS']=$authCode;

    //主帐号
    $accountSid = 'xxxx';

    //主帐号Token
    $accountToken= 'xxxx';

    //应用Id
    $appId='xxxx';

    //请求地址，格式如下，不需要写https://
    $serverIP='app.cloopen.com';

    //请求端口
    $serverPort='8883';

    //REST版本号
    $softVersion='2013-12-26';

    // 加载SDK
    include './CCPRestSDK.php';

    function sendTemplateSMS($to,$datas,$tempId=1)
    {
         // 初始化REST SDK
         global $accountSid,$accountToken,$appId,$serverIP,$serverPort,$softVersion;
         $rest = new REST($serverIP,$serverPort,$softVersion);
         $rest->setAccount($accountSid,$accountToken);
         $rest->setAppId($appId);
         // 发送模板短信
         $result = $rest->sendTemplateSMS($to,$datas,$tempId);
    }

        sendTemplateSMS($_POST[phone],array($authCode,40));

 ?>

3.checkCode.php

<?php
    session_start();

    // 验证
    if($_SESSION['authCodeS']==$_POST['userCode']){
      echo '注册成功(づ￣3￣)づ╭❤～';
       echo '<meta http-equiv="refresh" content="2;url=register.html">';die;
    }
    else{
     echo '注册失败o(╥﹏╥)o';
     echo '<meta http-equiv="refresh" content="2;url=register.html">';die;
    }

?>

至于限制用户点击后睡眠一段时间，可以自己修改添加