【学习笔记】
来源:初学php,一期项目电商,注册时需要使用短信验证码,但是注册的时候,点击接收验证码时,会产生跳转(尼玛,这不是我想要的啊!o(╥﹏╥)o)
查询资料和看书之后,知道使用js+ajax可以实现,就从网上找了一些博客的资料来看,最后写出了可以实现需求的代码。
主要参考方法:https://blog.csdn.net/isabellazheng1991/article/details/53543925
https://q.cnblogs.com/q/45695/
【解决方法】
1个html页面,2个php页面,一个用于发送验证码一个用于验证,分开一是便于理解,二是防止点击注册时造成验证码反复产生,实际中写两个方法即可
短信接入平台为容联云(主要是免费送8块钱!!!)
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; } ?>
至于限定时间啥的,这个也很简单,加个id写个方法就解决了,自己玩去吧.