Ajax小结Ajax验证注册功用的三种方法

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=name]’).val();
               //ajax去服务器端校验nm是或不是可用
                       $.ajax({
                                url:”/index.php/Home/User/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){
                               echo
json_encode(array(‘status’=>0));//用户名被占用
                      }else{
                               echo
json_encode(array(‘status’=>1));//用户名可以利用
                      }
                 }
             }

 

相关文章