利用ajax实现登陆验证，但是点击按钮没有响应是什么情况。不知道是什么问题，大神帮忙看一下

<?php
class login extends baseclass  {
function __construct(){
parent::__construct();
}

function index(){
$this -> smarty -> display('sysadmin/sys_login.html');
}
function login_page(){
$username = $_REQUEST['username'] ? trim($_REQUEST['username']) : '';
$password = $_REQUEST['password'] ? md5(trim($_REQUEST['password'])) : '';
$user_sql = "select * from user where name = '{$username}' and password = '{$password}' ";
  $user_ob = $this -> db -> query($user_sql);
$user = $user_ob -> fetchAll();
var_dump($user);exit;
if($user){
echo '1';
exit();
}else{
echo '2';
exit();
}
}
}
?>
<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>有邻科技后台登录</title>    <link rel="stylesheet" href="common/css/sysadmin/normalize.css">    <style type="text/css">
       .btn 
     {
        display: inline-block; 
        *display: inline; 
        *zoom: 1; 
        padding: 4px 10px 4px; 
        margin-bottom: 0; 
        font-size: 13px; 
        line-height: 18px; 
        color: #333333; 
        text-align: center;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); 
        vertical-align: middle; 
        background-color: #f5f5f5; 
        background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); 
        background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); 
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); 
        background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); 
        background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); 
        background-image: linear-gradient(top, #ffffff, #e6e6e6); 
        background-repeat: repeat-x; 
        filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0); 
        border-color: #e6e6e6 #e6e6e6 #e6e6e6; 
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
        border: 1px solid #e6e6e6; 
        -webkit-border-radius: 4px; 
        -moz-border-radius: 4px; 
        border-radius: 4px; 
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 
        cursor: pointer; 
        *margin-left: .3em; 
        }
       .btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] 
         { 
            background-color: #e6e6e6; 
         }
       .btn-large 
        { 
        padding: 9px 14px; 
        font-size: 15px; 
        line-height: normal; 
        -webkit-border-radius: 5px; 
        -moz-border-radius: 5px; 
        border-radius: 5px; 
        }
       .btn:hover 
        { 
        color: #333333; 
        text-decoration: none; 
        background-color: #e6e6e6; 
        background-position: 0 -15px; 
        -webkit-transition: background-position 0.1s linear; 
        -moz-transition: background-position 0.1s linear; 
        -ms-transition: background-position 0.1s linear; 
        -o-transition: background-position 0.1s linear; 
        transition: background-position 0.1s linear; 
        }
       .btn-primary, .btn-primary:hover 
       { 
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 
        color: #ffffff;
        }
       .btn-primary.active 
        { 
        color: rgba(255, 255, 255, 0.75); 
        }
       .btn-primary 
        { 
        background-color: #4a77d4; 
        background-image: -moz-linear-gradient(top, #6eb6de, #4a77d4); 
        background-image: -ms-linear-gradient(top, #6eb6de, #4a77d4); 
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6eb6de), to(#4a77d4)); 
        background-image: -webkit-linear-gradient(top, #6eb6de, #4a77d4); 
        background-image: -o-linear-gradient(top, #6eb6de, #4a77d4); 
        background-image: linear-gradient(top, #6eb6de, #4a77d4); 
        background-repeat: repeat-x; 
        filter: progid:dximagetransform.microsoft.gradient(startColorstr=#6eb6de, endColorstr=#4a77d4, GradientType=0);  
        border: 1px solid #3762bc; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5); 
        }
       .btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] 
        { 
        filter: none; 
        background-color: #4a77d4; 
        }
       .btn-block 
        { 
        width: 100%; 
        display:block; 
        }        * 
         { 
         -webkit-box-sizing:border-box; 
         -moz-box-sizing:border-box; 
         -ms-box-sizing:border-box; 
         -o-box-sizing:border-box; 
         box-sizing:border-box; 
         }        html 
         { 
         width: 100%; 
         height:100%; 
         overflow:hidden; 
         }        body 
         {
            width: 100%;
            height:100%;
            font-family: 'Open Sans', sans-serif;
            background: #092756;
            background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top,  rgba(57,173,219,.25) 0%, rgba(42,60,87,.4) 100%), -moz-linear-gradient(-45deg,  #670d10 0%, #092756 100%);
            background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -webkit-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
            background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -o-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
            background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -ms-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
            background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg,  #670d10 0%,#092756 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E1D6D', endColorstr='#092756',GradientType=1 );
         }
        .login 
         {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -150px 0 0 -150px;
            width:410px;
             height:300px;
         }
        .login h1 
         { 
         color: #fff; 
         text-shadow: 0 0 10px rgba(0,0,0,0.3); 
         letter-spacing:1px; 
         text-align:center; 
         }        input 
         {
            width: 100%;
            margin-bottom: 10px;
            background: rgba(0,0,0,0.3);
            border: none;
            outline: none;
            padding: 10px;
            font-size: 13px;
            color: #fff;
            text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
            border: 1px solid rgba(0,0,0,0.3);
            border-radius: 4px;
            box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
            -webkit-transition: box-shadow .5s ease;
            -moz-transition: box-shadow .5s ease;
            -o-transition: box-shadow .5s ease;
            -ms-transition: box-shadow .5s ease;
            transition: box-shadow .5s ease;
        }
        input:focus 
         { 
         box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); 
         }
    </style>
    
</head><body>
<script type="text/javascript" src = "jQery/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="common/js/sysadmin/sys_login.js"></script><div class="login">
    <h1>天津有邻互动科技有限公司</h1>
<h1>接口文档管理后台登录</h1>
        <input type="text" name="username" placeholder="用户名" required="required" />
        <input type="password" name="password" placeholder="密码" required="required" />
        <button type="button" class="btn btn-primary btn-block btn-large" id="login">登录</button>
</div>
</body></html>
$(document).ready(function(){
$('#login').click(function(){
   var username = $("#name").val(); 
   var password = $("#password").val();
   var status = true;
   if(!username){
alert("请填写用户名！");
status = false;
return false;
}
if(!password){
alert("请填写密码！");
status = false;
return false;
}
   if(status){
   $.ajax({
   type: "post",
   dataType:"json",
   url: "sysadmin.php?c=login&m=login_page",
   data: {"name":name,"password":password},
   success: function(re){
     if(re == 1){
      alert('登录成功');
      return true;
      location.href = "sysadmin.php?c=sys_homepage";
      
     }else{
      alert('用户名或密码错误');
      return false;
      }
    }
    });
})
});
return false;
}

解决方案 »

  1.   

    php里是$_REQUEST['username'] ? trim($_REQUEST['username']) : '';jax里是data: {"name":name,"password":password},改为data: {"username":name,"password":password},
      

  2.   

    肯定是js部分报错了，控制台看下有无js错误。
      

  3.   

    没有 $_REQUEST['username'] 被传递，自然不会有正确返回var_dump($user);exit;
    无论如何都不会有 1 或 2 到达客户端
      

  4.   

    username, name不统一，<input name="username" 没有使用id,还有其他问题导致很明显是html和js出错。var username = $("#name").val(); 这里已经是出错的。
    php那里，你输出不是json，所以也不会返回html body修改为<body>
        <script type="text/javascript" src = "jQery/jquery-3.1.1.min.js"></script>
        <script type="text/javascript" src="common/js/sysadmin/sys_login.js"></script>
     
    <div class="login">
        <h1>天津有邻互动科技有限公司</h1>
        <h1>接口文档管理后台登录</h1>
            <input type="text" name="username" placeholder="用户名" id="username" required="required" />
            <input type="password" name="password" placeholder="密码" id="password" required="required" />
            <button type="button" class="btn btn-primary btn-block btn-large" id="login">登录</button>
    </div>
    </body>
    js修改为$(document).ready(function(){
    $('#login').click(function(){
       var username = $("#username").val(); 
       var password = $("#password").val();
       var status = true;
       if(!username){
    alert("请填写用户名！");
    status = false;
    return false;
    }
    if(!password){
    alert("请填写密码！");
    status = false;
    return false;
    }
       if(status){
       $.ajax({
       type: "post",
       dataType:"json",
       url: "sysadmin.php?c=login&m=login_page",
       data: {"username":username,"password":password},
       success: function(re){
         if(re['success'] == 1){
          alert('登录成功');
          return true;
          location.href = "sysadmin.php?c=sys_homepage";
          
         }else{
          alert('用户名或密码错误');
          return false;
          }
        }
        });
    })
    });
    return false;
    }
    php这个方法修改为<?php
    class login extends baseclass  {
    function __construct(){
    parent::__construct();
    }

    function index(){
    $this -> smarty -> display('sysadmin/sys_login.html');
    }
    function login_page(){
    $username = $_REQUEST['username'] ? trim($_REQUEST['username']) : '';
    $password = $_REQUEST['password'] ? md5(trim($_REQUEST['password'])) : '';
    $user_sql = "select * from user where name = '{$username}' and password = '{$password}' ";
      $user_ob = $this -> db -> query($user_sql);
    $user = $user_ob -> fetchAll();
                    $ret=array();
    if($user){
                            $ret['success'] = 1;
    echo json_encode($ret);
                            exit();
    }else{
                            $ret['success'] = 2;
    echo json_encode($ret);
                            exit();
    }
    }
    }
    ?>