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 не работает? Я вроде как новичок в 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

Логин должен быть форма идентификатора, но вы не отправляли вашу форму открывающего тега

<form id = "login"> 

и в коде Ajax вы должны обрабатывать представить события формы, как это:

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

})) 

Answer 3

Следующая ссылка может быть полезна, если вы новичок в ajax

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