不工作AJAX登錄表單

Question

我有以下的AJAX腳本，並形成登錄到我的網站：

<div class="shadowbar"><form id="login" method="post" action="/doLogin"> 
<div id="alert"></div> 
<fieldset> 

<legend>Log In</legend> 
<div class="input-group"> 
    <span class="input-group-addon">E-Mail</span> 

    <input type="email" class="form-control" name="email" value="" /><br /> 
</div> 
<div class="input-group"> 
    <span class="input-group-addon">Password</span> 

    <input type="password" class="form-control" name="password" /> 
    </div> 

</fieldset> 

<input type="submit" class="btn btn-primary" value="Log In" name="submit" /> 

</form></div> 
<script> 
$.ajax({ 
    type: "post", 
    url: "/doLogin", 
    data: $('#login').serialize(), 
    success: function(result) { 
       if(result == " success"){ 
        window.location = "/index.php"; 
       }else if(result == " failure"){ 
        $("#alert").html("<div class='alert alert-warning'>Either your username or password are incorrect, or you've not activated your account.</div>"); 
        //$("#alert").show(); 
       } 
    } 
}); 

但並不瓶坯Ajax和帶給我的結果頁面，這是不我想要的是。有什麼特定的原因，AJAX不起作用？如果這是顯而易見的，我對JavaScript很陌生。

Answer 1

腳本加載後，您正在運行Ajax函數，並且沒有采取任何措施防止表單在提交表單時正常提交。

您需要將JS已經移動到一個函數。然後將該函數作爲窗體上的提交處理程序綁定。然後防止提交事件的默認行爲。

$('#login').on("submit", function(event) { 
 
    event.preventDefault(); 
 

 

 
    $.ajax({ 
 
    type: "post", 
 
    url: this.action, 
 
    data: $(this).serialize(), 
 
    success: function(result) { 
 
     if (result == " success") { 
 
     window.location = "/index.php"; 
 
     } else if (result == " failure") { 
 
     $("#alert").html("<div class='alert alert-warning'>Either your username or password are incorrect, or you've not activated your account.</div>"); 
 
     //$("#alert").show(); 
 
     } 
 
    } 
 
    }); 
 

 
});

<form action="/doLogin" method="post" id='#login'> 
 

 
    <fieldset> 
 
    <legend>Log In</legend> 
 
    <div class="input-group"> 
 
     <label for="email" class="input-group-addon">E-Mail</label> 
 

 
     <input type="email" class="form-control" name="email" id="email" value="" /> 
 
     <br /> 
 
    </div> 
 
    <div class="input-group"> 
 
     <label class="input-group-addon" for="password">Password</label> 
 

 
     <input type="password" class="form-control" name="password" id="password" /> 
 
    </div> 
 

 
    </fieldset> 
 

 
    <input type="submit" class="btn btn-primary" value="Log In" name="submit" /> 
 

 
</form> 
 
</div>

---

這就是說 - 當你成功登錄，你只是重定向到另一頁。你幾乎可以肯定不會使用Ajax。

Answer 2

登錄形式應爲ID，但你不發表您的形式打開標籤

<form id = "login"> 

，並在你的Ajax代碼應該處理表單的提交事件是這樣的：

$("#login").submit(function({ // your logic should be here 

})) 

Answer 3

如果您對ajax不熟悉，以下鏈接可能會對您有所幫助：

http://webdevelopingcat.com/jquery-php-beginner-tutorial-ajax/