爲什麼我的表單在ajax發佈後發佈？我該如何解決？

Question

所以我有這樣的形式：

<form method="post" id="login-nav"> 
     <div class="form-group"> 
       <label class="sr-only" for="exampleInputEmail2">Email address</label> 
       <input type="email" id="email" name="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required> 
     </div> 
     <div class="form-group"> 
       <label class="sr-only" for="exampleInputPassword2">Password</label> 
       <input type="password" id="PassWord" name="PassWord" class="form-control" id="exampleInputPassword2" placeholder="Password" required> 
       <div class="help-block text-right"><a href="">Zaboravili ste password?</a></div> 
     </div> 
     <button id="submitit" onclick="GetUser();" class="btn btn-primary btn-block">Sign in</button> 
     <div class="checkbox"> 
      <label> 
       <input type="checkbox"> keep me logged-in 
      </label> 
     </div> 
</form> 

當我按下登錄按鈕，我發帖子，我有我的HTML短短的一秒鐘正確更新，然後重新加載頁面。這不是我想要的。我不希望頁面重新加載，但保持它在我的ajax調用後。這裏是JavaScript/jQuery代碼：

function GetUser() { 
var email = $("#email").val(); 
var password = $("#PassWord").val(); 

$.post('../phpdatabase/getlogin.php',{ email: email , password : password }, function(data){ 
    $('#LogNav').html(data); 
}); 
} 

Answer 1

一個提交按鈕的默認行爲是來提交表單，所以你必須防止它。

onclick="GetUser(event);" 

這會將事件傳遞給函數回調。 Insde你的函數，你必須使用：

function GetUser(e) { 
    e.preventDefault(); 

---

我建議你到事件從按鈕submit事件更改爲以下形式：

$("#login-nav").on("submit", function(e) { 
    var email = $("#email").val(); 
    var password = $("#PassWord").val(); 

    $.post('../phpdatabase/getlogin.php',{ email: email , password : password }, function(data){ 
     $('#LogNav').html(data); 
    }); 

    e.preventDefault(); 
}); 

避免使用直列事件到您的HTML元素，例如onclick,onfocus等...

Answer 2

添加按鈕的類型是<button type="button"></button>。因爲默認情況下，如果它位於表單標籤下，它將假定按鈕類型提交。

<form method="post" id="login-nav"> 
    <div class="form-group"> 
      <label class="sr-only" for="exampleInputEmail2">Email address</label> 
      <input type="email" id="email" name="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required> 
    </div> 
    <div class="form-group"> 
      <label class="sr-only" for="exampleInputPassword2">Password</label> 
      <input type="password" id="PassWord" name="PassWord" class="form-control" id="exampleInputPassword2" placeholder="Password" required> 
      <div class="help-block text-right"><a href="">Zaboravili ste password?</a></div> 
    </div> 
    <button type="button" id="submitit" onclick="GetUser(e);" class="btn btn-primary btn-block">Sign in</button> 
    <div class="checkbox"> 
     <label> 
      <input type="checkbox"> keep me logged-in 
     </label> 
    </div> 
</form> 

此外，您可以通過將事件傳遞到函數並阻止它在javascript函數中來阻止它。這樣

function GetUser(e) { 
    e.preventDefault();