通过Ajax POST无法正常工作

Question

我现在通过各种数量的StackOverflow页面和其他网站 - 但找不到正确的解决方案，我的问题。我尝试通过后发布过两个数值加以PHP页面：

loginframe.php：

<form class="signin"> 
     <input type="username" id="inputUsername" class="control" placeholder="Username" required autofocus> 
     <input type="password" id="inputPassword" class="control" placeholder="Password" required> 
     <div id="remember" class="checkbox"> 
      <label> 
       <input type="checkbox" value="remember-me">Remember me 
      </label> 
     </div> 
     <button class="btn-login" type="submit" value="login" id="btn-login">Sign in</button> 
    </form> 

我的JS：

$(document).ready(function(){ 
    $("#btn-login").click(function(){ 

     var username = $("#inputUsername").val(); 
     var password = $("#inputPassword").val(); 

     $.ajax(
     { 
      type: "POST", 
      url: 'login.php', 
      data: { 
       user: username, 
       pass: password 
      }, 
      success: function(result) 
      { 
       $("#result").html(result); 
      } 
     }); 
    }); 

}); 

我的login.php

<?php 
    if(isset($_POST['user']) && isset($_POST['pass'])) 
    { 
     echo $_POST['user']; 
     echo $_POST['pass']; 
    } else { 
     include 'loginframe.php'; 
    } 

这个login.php只是用来检查数据是否通过。情况绝非如此。它总是打开loginframe.php ... 我找不到错误 - 我感谢您的帮助！万分感谢。

Answer 1

使用防止默认方法。

$(document).ready(function(){ 
     $("#btn-login").click(function(event){ 

      event.preventDefault(); // this one prevents the default submission of the form 

      var username = $("#inputUsername").val(); 
      var password = $("#inputPassword").val(); 

      $.ajax(
      { 
       type: "POST", 
       url: 'login.php', 
       data: { 
        user: username, 
        pass: password 
       }, 
       success: function(result) 
       { 
        $("#result").html(result); 
       } 
      }); 
     }); 

    });