做好了一个很简单的前端验证加上后端的跳转

今天要发布的这个可能是自己最粗心的一次了，很多问题都想明白了，可是做的时候却发现不是自己想象的那样，还得慢慢的调试，在网上查了很多方法总是行不通，还是自己摸索出来的！

前端显示+验证+后台查询，小伙伴们欢迎指点！

前台要显示的代码html：

 <form method="post" id="form" action="{:url('index/main')}">
                    <div class="form-group mg-t20">
                        <i class="icon-user icon_font"></i>
                        <input type="text" class="login_input" id="username" placeholder="请输入用户名" />
                    </div>
                    <div class="form-group mg-t20">
                        <i class="icon-lock icon_font"></i>
                        <input type="password" class="login_input" id="password" name="password" placeholder="请输入密码" />
                    </div>
                         <div id="msg"></div>

                    <div class="checkbox mg-b25">
                        <label>
                            <input type="checkbox" checked="checked" />记住我的登录信息
                        </label>
                    </div>
                    <button style="submit" class="login_btn"  type="submit" id="submit" >登 录</button>
               </form>

使用ajax原来是很简单的，可是真的做了却狠痛苦呀！

奉上script代码，这里使用的jQuery,$.ajax最底层的方法，大神莫吐槽！

 <script type="text/javascript">
       $(function(){
           $("#submit").bind("click",function(event){
              $username =  $("#username").val();
              $password = $('#password').val();
               if ($username == " " || $password == "") {
                  // 阻止默认行为
                 $("#msg").html("<p>用户名或密码不能为空！</p>");
                 return false;
               }else{
                 $.ajax({
                    data: {'username': $username, 'password': $password},
                    async: false,
                    type: "post",
                    dataType: "json",
                    url: "{:url('index/check')}",   //验证的页面
                    success: function(data){
                      // 获取成功之后的所有值
                      console.log(data);     
                      if (data.state == 1) {
                        window.location.href = "{:url('index/main')}";
                        console.log(data.state);
                      }else{
                        $("#msg").html("<p>请输入正确的用户名或密码</p>");
                         return false;
                      }
                    }
                  });
               }
               return false;
           })

       })
   </script>

接下来就是要使用php来做了，这里采用的tp5的框架，很多还在摸索中行进！

 public function check()
    {


    $ret = [];
    $username = input('username');    //获取前台的用户名
    $password = input('password');    //获取前台的密码
    $data = Db::table('user')->where('u_name',$username)->where('u_pwd',$password)->find(); //查询密码是不是正确的
      // 条件判断
      if($data){
        $ret = ['state'=>1, 'msg'=>'查询到sql'];
      }else{
        $ret = ['state'=>0, 'msg'=>'未查询到sql'];
      }
      // 将获取到的数值解析成为json格式
      echo json_encode($ret);

    }

最后输出的结果有正确的，和不正确的：

图一表示正确

图一

图二表示错误

图二

今天先分享这些吧，以后会有更大的进步，更多的技术，希望能和更多的小伙伴们共同成长！