Неправильно работает alert в jquery?

Question

[Shinguru]

Привет.
Не могу понять в чем проблема.
вот моя форма:

<form id="loginform" class="form">
<div class="form-group">
<label for="login" class="cols-sm-2 control-label required">Login</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-users fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="login" id="login" placeholder="Введите ваш login" required />
</div>
</div>
</div>

<div class="form-group">
<label for="password" class="cols-sm-2 control-label required">Password</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
<input type="password" class="form-control" name="password" id="password" placeholder="Введите ваш password" required />
</div>
</div>
</div>
<div class="form-group ">
<button type="submit" class="btn btn-primary btn-lg btn-block login-button" id="do_login">войти</button>
</div>
</form>

Вот мой скрипт:

$('#loginform').submit(function(){
    var data= $(this).serialize();
    $.ajax({
        type: "POST",
        url:"php/login.php",
        data: data,
        success: function(data){
            if (data=='OK'){
                window.location.href= "#страничка";
            } else {                
             window.alert(data);
            };
        }
    })
});

суть проста, в php файле я ищу пользователя по БД, если нахожу, то возвращается ответ "ОК" и скрипт перекидывает меня на целевую страничку с контентом доступном только для залогиненных пользователей. Если же такого пользователя в базе нет, то возвращается ответ "пользователь не найден" и скрипт вызывает alert с текстом ошибки.

В моем же случае, при логине, если пользователь найден, вызывается alert с текстом "OK" и по нажатию на подтверждение действия, перекидывает на целевую страничку, но данные на ней не обновлены, нужно нажать вручную еще раз обновить, только тогда контент для пользователей появляется. Как избежать alert в случае удачного логина пользователя и мгновенной переадресации на целевую страничку с актуальными данными?

Answer 1

[Евгений Акулинин]

В конце обработчика формы надо вызвать return false, чтобы отключить стандартное поведение формы

$('#loginform').submit(function(){
    ...
    return false;
});

Comments

[Shinguru]

у меня форма входа находится в модальном окне, если я вызываю return false как Вы указали, то просто модальное перестает закрываться.
Извиняюсь, в java я полный ноль.

[Евгений Акулинин]

Shinguru, модальное окно можно закрыть таким образом
$('#ид_модального_окна').modal('hide');

Без return false сначала сработает ваш обработчик формы с аяксом, а потом сработает стандартный обработчик формы браузера, что вызовет повторную отправку данных формы по текущему адресу.

[ThunderCat]

Shinguru,

просто модальное перестает закрываться.

а зачем закрывать? Если вы переходите по локэйшн.хреф то страничка все равно перезагрузится, а если будет ошибка то модалку ине надо закрывать.

Answer 2

[ThunderCat]

во первых

$('#loginform').submit(function(e){
  e.preventDefault();
...

иначе у вас тупо субмитится форма, никакого "перенаправления" не происходит.

во вторых укажите в возвращаемом типе данных конкретный тип ожидаемого контента, например json. И соответственно отправляемые с сервера ответы оборачивайте в json_encode(), а то ваш скрипт не понимает что за строка приходит с сервера и переходит к строке else { window.alert(data);

Comments

[Shinguru]

то есть достаточно просто указать dataType:"json" ?

$('#loginform').submit(function(e){
e.preventDefault();
    var data= $(this).serialize();
    $.ajax({
        dataType: "json",
        type: "POST",
        url:"php/login.php",
        data: data,
        success: function(data){
            if (data=='OK'){
                window.location.href= "#страничка";
            } else {                
             window.alert(data);
            };
        }
    })
});

В php результаты запросов я обернул в json_encode().

сильно извиняюсь за тупость, так как только начал учить и пока полный ноль в JS.

[ThunderCat]

Shinguru, да, на стороне сервера соответственно нужно отдавать json что-то типа json_encode('OK');, но я бы рекомендовал более четкую структуру, например json_encode(array('error'=>0)); и в сукчес проверять if(data.error==0). В случае ошибочных данных тогда можно отдавать

json_encode(array('error'=>1, 'errtext'=>'data was wrong!'));

что облегчает разбивку на проверку и дебаг.