【转】前端验证码倒计时、后台发送验证码、创蓝短信接口
前端代码:倒计时
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.yanzm_b_btn {
width: 98px;
height: 40px;
float: left;
line-height: 40px;
text-align: center;
border-radius: 5px;
background: #f0f0f0;
color: #aeaeae;
font-size: 14px;
margin-left: 10px;
border: none;
margin-bottom: 30px;
}
</style>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<input class="register_b_shouji" type="text" placeholder="请输入手机号" name="E_Mobile" id="E_Mobile">
<input class="yanzm_b_btn" type="button" value="发送验证码" onclick="GetCodemo(this)"/>
</body>
</html>
<script>
var wait = 60;
function GetCodemo(o){
//发送验证码
if(wait == 60){
//发送验证码
var mobile = $("#E_Mobile").val();
if(mobile!=""){
//请求后台获取数据、
$.post('getMobileCode',{mobile:mobile,type:'reg'},function(data){
if(data.status==1){
//发送成功
}else{
//发送失败
}
},'json');
}else{
$("#E_Mobile").focus();
return false;
}
}
if(wait ==0){
o.removeAttribute('disabled');//禁用
o.value= '重新发送';
wait = 60;
}else{
o.setAttribute('disabled',true);
o.value= "已发送("+wait+")";wait--;
setTimeout(function(){GetCodemo(o)},1000);
}
}
</script>
后端发送验证码代码:
/**
* 发送验证码
*/
public function getMobileCode(){
header("content-type:text/html; charset=utf-8");
$Mobile = $_POST ["mobile"]; //用户修改的手机号
$type = trim($_POST["type"]); // 定义用来发送短信
$type = empty($type)?"reg":$type; //短信模版代码
if (!empty($type) && strlen($Mobile)==11){
$Template = M("pagetemplate")->where(array("E_Type"=>$type))->cache(true,6000)->find(); //判断类型,发送验证码有多个地方使用到,比如找回密码,注册等
if(empty($Template)) $this->jsonReturn(0, "短信类型异常!", '');
if(!empty($Template['ID'])){
$Code = getCode(5);//验证码
$sendstr = str_replace("0000", "", $Template["E_Template"]); //发送验证码文本、替换、例子:你正在注册某某商城,验证码为0000,[某某商城]
$result = sendSMS($Mobile, $sendstr, 'true'); //调用创蓝短信方法
$result = $this->execResult($result); //处理返回值
if($result[1] == "0") { //返回的是一个数组、状态码 0 是成功
$seReCode = $Mobile . "," . $Code;
$_SESSION['MobileCode'] = $seReCode;
$this->jsonReturn(1, "发送成功!", '');
}else{
$this->jsonReturn(0, "发送失败!", '');
}
}else{
$this->jsonReturn(0, "异常、非法操作!", '');
}
}else{
$this->jsonReturn(0, "异常、非法手机号!", '');
}
}
/**
* 查询额度
*
* 查询地址
*/
protected function queryBalance() {
$chuanglan_config = $this->GetInterfacecon ( 'message' );
// 查询参数
$postArr = array (
'account' => $chuanglan_config ["ConS"] ['USERID'] ['val'],
'pswd' => $chuanglan_config ["ConS"] ['PWD'] ['val']
);
$result = $this->curlPost ( $chuanglan_config ["ConS"] ['URLQ'] ['val'], $postArr );
return $result;
}
/**
* 处理返回值
*/
protected function execResult($result) {
$result = preg_split ( "/[,\r\n]/", $result );
return $result;
}
/**
* 通过CURL发送HTTP请求
*
* @param string $url
* //请求URL
* @param array $postFields
* //请求参数
* @return mixed
*/
protected function curlPost($url, $postFields) {
$postFields = http_build_query ( $postFields );
$ch = curl_init ();
curl_setopt ( $ch, CURLOPT_POST, 1 );
curl_setopt ( $ch, CURLOPT_HEADER, 0 );
curl_setopt ( $ch, CURLOPT_RETURNTRANSFER, 1 );
curl_setopt ( $ch, CURLOPT_URL, $url );
curl_setopt ( $ch, CURLOPT_POSTFIELDS, $postFields );
$result = curl_exec ( $ch );
curl_close ( $ch );
// dump ( $result );
return $result;
}
/**
* 发送短信
*
* @param string $mobile
* 手机号码
* @param string $msg
* 短信内容
* @param string $needstatus
* 是否需要状态报告
* @param string $product
* 产品id,可选
* @param string $extno
* 扩展码,可选
*/
protected function sendSMS($mobile, $msg, $needstatus = 'false', $product = '', $extno = '') {
// 创蓝接口参数
$postArr = array (
'account' => '',//账号
'pswd' => '',//密码
'msg' => $msg, //发送内容
'mobile' => $mobile, //手机号
'needstatus' => $needstatus,
'product' => $product,
'extno' => $extno
);
$result = $this->curlPost ( $chuanglan_config ["ConS"] ['URL'] ['val'], $postArr );
return $result;
}
官方文档:https://www.253.com/api-docs-5.html,状态码地址:https://www.253.com/api-docs-1.html
相关文章
- WordPress 3.5.1添加后台编辑器按钮
- 前端写接口 请求后台数据 存vuex中 打印到控制台「建议收藏」
- 基于 Vue3、TypeScript、Vite2、Pinia 开源的后台管理框架
- zblog后台编辑模块式时提示“UNKNOWN:未查询到相关数据”错误的解决办法
- 后台管理系统 – 页面布局设计
- WordPress 通过加密隐藏 wp-login/admin 后台默认登录地址
- 尚医通-后台接口
- ChatGPT后台揭秘!存储资源盘活系统构建AI时代的存储底座
- 2.8k Star国产开源的漂亮清新的中后台管理系统
- WPJAM Basic 实现文章后台列表页全 AJAX 操作
- WordPress 技巧:在 WordPress 后台隐藏自定义字段
- 管理后台运行Redis服务(后台运行redis)
- 传输文件Linux下利用SCP后台传输文件(linuxscp后台)
- Win10 21H2“晃动标题栏以最小化后台窗口”功能默认关闭了
- Oracle分页查询技巧:决胜后台管理系统(oracle怎么分页查询)
- 如何让 Linux 脚本在后台自动运行?(linux脚本后台运行)
- Dell大举收购Oracle,增强后台数据运营能力(dell收购oracle)
- ORACLE实例的后台进程
- .netcs后台刷新aspx页面的四种方式
- Jquery+asp.net后台数据传到前台js进行解析的方法
- java后台调用HttpURLConnection类模拟浏览器请求实例(可用于接口调用)