為什么在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);"

這會將事件傳遞給函數回調。 安裝您必須使用的功能：

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>為<button type="button"></button> 。 因為默認情況下，如果它在表單標簽下，它將假定按鈕類型為Submit。

<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();