总结Ajax验证注册功能的两种方式

方法一：使用jqueryForm插件提交表单注册

①首先引入jquery和jqueryForm插件

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>

②表单通过ajax方式提交

<script type="text/javascript">

          $('form').submit(function(){
                     //具体实现使用jqueryForm的方式ajax提交
                     $(this).ajaxSubmit({
                                  url:" ",//指定表单的提交地址
                                  type:'post',//请求类型 post/get
                                  dataType:'json',//指定数据交互格式
                                  success:function(msg){
                                            if(msg.status==1){
                                            //注册成功
                                           location.href='跳转地址' ;
                                        }else{
                                            alert(msg.msg);
                                     }
                                 }
                             });
                               //阻止当前的表单默认的提交
                               return false;
                 });
</script>

方法二：以TP为例通过Ajax无刷新校验用户名

<input  type="text" name="name" id="username" style="color:#ccc;" onblur="checkname()"/>

①表单页通过Ajax提交

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>

<script type="text/javascript">            

              //校验用户名是否被占用
                function checkname(){
                var nm = $('#name').val();
               //ajax去服务器端校验nm是否可用
                       $.ajax({
                                url:"{:U('checkName')}",
                                data:{'nm':nm},
                                dataType:'json',
                                type:'get',
                                success:function(msg){
                                if(msg.status===0){
                                $('#nameresult').html("<span style='color:red'>用户名已存在</span>");
                           }else{
                                $('#nameresult').html("<span style='color:green'>用户名可用</span>");
                        }
                     }
                 });
              }
</script>

②服务器端响应

            function checkName(){
                     if(IS_AJAX){
                     //接收客户端传递过来的"用户名"信息
                     $username = I('get.nm');
                     $info = D('User')->where(array('username'=>$username))->find();

                     if($info){
                             $this->ajaxReturn(array('status'=>0));//用户名被占用
                      }else{
                               $this->ajaxReturn(array('status'=>1));//用户名可以使用
                      }
                 }
             }