使用 jquery 的 ajax 进行接口化开发（获取验证码，注册）

接口化开发

请求地址即所谓的接口，通常我们所说的接口化开发，其实是指一个接口对应一个功能， 并且严格约束了请求参数和响应结果的格式，这样前后端在开发过程中，可以减少不必要的讨论， 从而并行开发，可以极大的提升开发效率，另外一个好处，当网站进行改版后，服务端接口只需要进行微调。

案例：获取验证码，注册

    
    

    
     
     

        
      
      

                用户名
                
            

                请设置密码
                
            

                请确认密码
                
            

                验证手机
                
            

                短信验证码
                
                
            

                
                
            
    
     
     

    
    

    
    

    
     
     
用户名不能为空

    
    
<script src="js/jquery.min.js"></script>
<script>
    /*
    * 1.获取短信验证码
    *
    * 1.1 确定手机号有没有输入，如果没有，提示“请输入手机号”
    * 1.2 确定手机号是否合法，以1开头，共11位的数字，如果不合法，提示“请输入正确的手机号”
    * 1.3 如果没有问题，利用ajax进行数据发送
    * 1.4 发送中，按钮变灰，禁止点击，显示“正在发送中”
    * 1.5 发送成功，根据再次获取短信的时间进行倒计时，按钮变灰，禁止点击，倒计时完成恢复原来的样式
    * 1.6 发送失败，按钮恢复
    * */
    var $tip = $('.tips > p');
    $('body').on('click','.verify', function () {
        $btn = $(this);
        /*禁止二次点击*/
        if($btn.hasClass('disabled')){
            return false;
        }
        var mobile = $('#mobile').val();
        /*1.1 确定手机号有没有输入，如果没有，提示“请输入手机号”*/
        if(!$.trim(mobile)){
            $tip.html("请输入手机号").show().delay(1500).fadeOut(500);
            return false;
        }
        /*1.2 确定手机号是否合法，以1开头，共11位的数字，如果不合法，提示“请输入正确的手机号”*/
        if(!/^1\d{10}$/.test(mobile)){
            $tip.html("请输入正确的手机号").show().delay(1500).fadeOut(500);
            return false;
        }
        /*1.3 如果没有问题，利用ajax进行数据发送*/
        $.ajax({
            type:'post',
            url:'getCode.php',
            data:{phoneNumber:mobile},
            dataType:'json',
            beforeSend: function () {
                /*1.4 发送中，按钮变灰，禁止点击，显示“正在发送中”*/
                $btn.addClass('disabled').val('正在发送中');
            },
            success: function (data) {
                /*1.5 发送成功，根据再次获取短信的时间进行倒计时，按钮变灰，禁止点击，倒计时完成恢复原来的样式*/
                console.log(data);
                var time = parseInt(data.time) || 60;
                var timer = setInterval(function () {
                    time--;
                    $btn.addClass('disabled').val(time+'秒后再次获取');
                    if(time <= 0){
                        clearInterval(timer);
                        $btn.removeClass('disabled').val('获取验证码');
                    }
                },1000);
            },
            error: function () {
                /*1.6 发送失败，按钮恢复*/
                $tip.html('服务繁忙，请稍后再试！').show().delay(1500).fadeOut(500);
                $btn.removeClass('disabled').val('获取验证码');
            }
        });
    });
    /*
    * 2.注册
    * 2.1 整个表单的验证，只做一个 用户名，“请输入用户名”
    * 2.2 发送表单数据给后台
    * 2.3 发送数据中，正在提交。。。按钮禁止点击（防止二次提交，置灰）
    * 2.4 发送成功
    *   注册成功：提示当前用户，“您的XXX的账户已经注册成功！”，按钮需要恢复
    *   注册失败：提示一些失败的原因
    * 2.5 通讯失败，提示服务端错误，按钮需要恢复
    * */
    $('body').on('click','.submit', function () {
        /*提交表单的方法 action 地址提交 同步的方式  跳转*/
        /* submit 是一个关键字  id最好不要写成submit，会冲突报错*/
        /*$('#ajaxForm').submit();*/
        var $btn = $(this);
        /*禁止二次提交*/
        if($btn.hasClass('disabled')){
            return false;
        }
        /*获取表单的所有数据*/
        var data = {
            name:$('#name').val(),
            pass:$('#pass').val(),
            repass:$('#repass').val(),
            mobile:$('#mobile').val(),
            code:$('#code').val()
        };
        /*serialize 转换表单数据  name=1&pass=2&repass=3&mobile=4&code=5 */
        /*这组数据是直接可以用jquery的ajax进行发送的*/
        /*不方便验证*/
        /*var data = $('#ajaxForm').serialize();
         var dataObject = {};
         var dataList = data.split('&');
         $.each(dataList,function(i,item){
         //console.log(item.split('='));
         var arr = item.split('=');
         /!* dataObject.name = xxx*!/
         /!* dataObject['name'] = xxx*!/
         dataObject[arr[0]] = arr[1];
         });*/
        /*serializeArray 转换成数组 每个对象｛name:'表单元素名字'，value:'表单元素值'｝*/
        /*这组数据是直接可以用jquery的ajax进行发送的*/
        /*var data = $('#ajaxForm').serializeArray();
         console.log(data);
         var dataObject = {};
         $.each(data,function(i,item){
         dataObject[item.name] = item.value;
         });
         console.log(dataObject);*/
        /*2.2 发送表单数据给后台*/
        $.ajax({
            type:'post',
            url:'register.php',
            data: data,
            dataType: 'json',
            beforeSend: function () {
                /*校验*/
                /*2.1 整个表单的验证，只做一个 用户名，“请输入用户名”*/
                if(!$.trim(data.name)){
                    $tip.html('请输入用户名').show().delay(1500).fadeOut(500);
                    return false;
                }
                /*2.3 发送数据中，正在提交。。。按钮禁止点击（防止二次提交，置灰）*/
                $btn.addClass('disabled').val('正在提交...');
            },
            success: function (data) {
                /*2.4 发送成功
                 注册成功：提示当前用户，“您的XXX的账户已经注册成功！”，按钮需要恢复
                 注册失败：提示一些失败的原因*/
                if(data.code == 10000){
                    $tip.html('您的'+data.result.name+'的账户已经'+data.msg).show().delay(1500).fadeOut(500);
                }else{
                    $tip.html(data.msg).show().delay(1500).fadeOut(500);
                }
            },
            error: function () {
                $tip.html('服务繁忙').show().delay(1500).fadeOut(500);
            },
            complete: function () {
                $btn.removeClass('disabled').val('立即注册');
            }
        });
    });

</script>