短信接口调用以及ajax发送短信接口实现以及前端样式

我们短信api用的是云信使平台提供的非免费短信服务：官网提供的demo有两种，分别是function加其调用、class文件加其调用、

在这里我们用class文件加调用；

首先，ThinkPHP里面自定义类文件，非常简单，1、按照传智播客方法，在项目之中任意地方创建classname.class.php文件，将里面的class声明到某个namespace下面，然后$class=new \namespacename\classname();这样去实例化，复习一下，class（）括号里面是可以传递参数的，类实例化时候也是可以传递参数的，但是类定义的时候是class{###}所以传递参数定义是在里面的__construct（）也就是构造方法之中；2、自己在urban项目之中是，将云信使平台提供的类文件放在ThinkPHP的liberary文件夹里面：

 <?php
 namespace Org\Util;
 class SmsApi {
     /**内部逻辑除参数传递之外不需要我们修改**/
 }
 ?>

然后我们在Home模块的controller里面实例化：

 <?php
 namespace Home\Controller;
  header('Content-Type:text/html; charset=utf-8');
 class SendController extends CommonController{
     //发送短信的控制类为index
 public function sendsms($phone)
             {
                 //接口账号
                 $uid =  C('message.uid');

                 //登录密码
                 $pwd = C('message.pwd');

                 /**
                 * 实例化接口
                 *
                 * @param string $uid 接口账号
                 * @param string $pwd 接口密码
                 */
                 $api = new \Org\Util\SmsApi($uid,$pwd);

                 //发送的手机 多个号码用,英文逗号隔开
                 $mobile = $phone;

                 $coded=$api->randNumber();
                 //短信内容
                 $content="您好！您的验证码是".$coded."。请尽快验证。【urban】";
                 //发送全文模板短信
                 $result = $api->sendAll($mobile,$content);

                 $_SESSION['sms_code']=$coded;//将发送的验证码数据存储session里面

                 if($result['stat']=='100')
                 {
                     return array('html'=>'发送成功');//这里之所以写成数组，是为了ajax函数返回json格式数据方便处理用
                 }
                 else
                 {
                     return array('html'=>'发送失败:'.$result['stat'].'('.$result['message'].')');
                 }

     }
 }
 ?>

其实和第一种是一样的实例化，只是放置的位置不一样而已，也就是命名空间不一样而已，顺便说一下上面的C方法，其实就是在config.php文件定义的数据：

 <?php
 return array(
     /*--------以下为短信接口的一些参数--------*/
     'message' => array(
          //申请的短信接口平台
          'http' => 'http://api.sms.cn/sms/',
          //申请时候的用户账号
         'uid' => '***',
         //申请时候的用户密码
         'pwd' => '***',
          )
     ）；13   ?>

好啦，现在我们已经将官方给的class以及控制器都引入TP之中了，那么现在需要写一个方法去实例化控制器（并且传入控制器必要的参数，而在控制器被实例化

也就是会实例化短信发送接口类文件），function：

 public function sendsms(){
     $input = I('post.');
     $phone=$input['phone'];//接收到电话号码，传递给短信发送接口函数用于发送短信
     $Send=A("Send");//实例化短信发送控制器
     $res=$Send->sendsms($phone);
     if($res){
       $this->ajaxReturn($res,'JSON');
      }
 }

当然你没有看错，后面那个$this->ajaxReturn()就是告诉你，在前台点击发送短信发送ajax请求给这个方法，这个是一个ajax接口函数；

现在教教你如何实现点击之后发送ajax请求并且开始倒计时，倒计时内无法点击发送短信按钮：

 <div >
   <label ><span><input name="data[mobile]" id="phone" type="text" value="" placeholder="請輸入常用的手機號" ></span></label>
 </div>
  <div>
  <label data-toggle="tooltip" data-placement="bottom" data-html="text"
   title="若手機裝有安全類軟件，短信可能會被攔截，如果未收到短信提示請查看安全類軟件是否標記為垃圾短信!"><span>
  <input name="phone" type="text" placeholder="短信验证码"></span>
  <input  style="fontSize:13px;" type="button" value="获取验证码" id="btnSendCode" onclick="sendMessage()"></input></label>
  </div>

给你看看javascript代码：

 <script type="text/javascript">
     /*-------------------------------------------*/
     var InterValObj; //timer变量，控制时间
     var count = 120; //间隔函数，1秒执行
     var curCount;//当前剩余秒数
     var code = ""; //验证码
     var codeLength = 6;//验证码长度
     function sendMessage() {
         curCount = count;
         var phone=$("#phone").val();//手机号码
         if(phone != ""){
             // //产生验证码
             // for (var i = 0; i < codeLength; i++) {
             //     code += parseInt(Math.random() * 9).toString();
             // }
             //设置button效果，开始计时
             $("#btnSendCode").attr("disabled", "true");
             InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
             //向后台发送处理数据
             $.ajax({
                 type: "POST", //用POST方式传输
                 dataType: "JSON", //数据格式:JSON
                 url: "{:U('Index/sendsms')}", //目标地址
                 data: {"phone": phone },
                 error: function (res) {
                     alert(res.html);
                  },
                 success: function (res){
                     alert(res.html);
                 }
             });
         }else{
             alert("手机号码不能为空！");
         }
     }
     //timer处理函数
     function SetRemainTime() {
         if (curCount == 0) {
             window.clearInterval(InterValObj);//停止计时器
             $("#btnSendCode").removeAttr("disabled");//启用按钮
             $("#btnSendCode").val("重新发送验证码");
             code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
         }
         else {
             curCount--;
             $("#btnSendCode").val( curCount + "内重新发送");
         }
     }
     </script>

看到没，当点击发送短信的时候，随即开始倒计时，并且在倒计时内button的属性为disabled，也就是不可点击；

这样就实现了想要的前端效果

附加：云信使之中的变量模板以及全文模板如何设置、、以及他们的差别所在，懂吧？？？上面的有个设置发送过去的短信验证码存入session是为了在提交用户资料时候用于验证用户输入的短信验证码是否正确；