Форум

Faab · #1 (**permalink**) 13.03.2014, 22:56

При нажатии на кнопку, не срабатывает метод POST , а тут же срабатывает метод GET, куда подставляются значения username и password. Если я даже и добавлю к форме метод "POST", то JS-скрипт не успеет обработать событие submit, и данные уйдут не с помощью ajax().

Это может быть глюком Bootstrap?

<form class="form-horizontal login-form" name="login-form">
  <div class="form-group">
    <label for="input-username" class="col-lg-2 control-label">Имя</label>

    <div class="col-lg-10">
      <input name="username" value="name" type="text" class="form-control" id="input-username" placeholder="Имя">
    </div>
  </div>
  <div class="form-group">
    <label for="input-password" class="col-lg-2 control-label">Пароль</label>

    <div class="col-lg-10">
      <input name="password" value="pass" type="password" class="form-control" id="input-password" placeholder="Пароль">
    </div>
  </div>
  <div class="form-group">
    <div class="col-lg-offset-2 col-lg-10">
      <button type="submit" class="btn btn-primary" data-loading-text="Отправляю...">Войти</button>
      <span class="help-block error"></span>
    </div>
  </div>
</form>

<script>
  $(document.forms['login-form']).on('submit', function() {
    var form = $(this);

    $('.error', form).html('');
    $(":submit", form).button("loading");

    $.ajax({
      url: "/login",
      method: "POST",
      data: form.serialize(),
      complete: function() {
        $(":submit", form).button("reset");
      },
      statusCode: {
        200: function() {
          form.html("Вы вошли в сайт").addClass('alert-success');
          window.location.href = "/chat";
        },
        403: function(jqXHR) {
          var error = JSON.parse(jqXHR.responseText);
          $('.error', form).html(error.message);
        }
      }
    });
    return false;
  });
</script>

рони · #2 (**permalink**) 13.03.2014, 23:19

Faab,
что у вас в 29 строке творится???

Faab · #3 (**permalink**) 13.03.2014, 23:52

Этот отрывок взят из исходника на этом сайте - я не могу точно сказать как работает эта строка. На сколько я понял эта строка предназначена для аттрибута data-loading-text="Отправляю..."> в submit и видимо должна как то влиять на состояние кнопки после нажатия.

Единственное, что могу точно сказать, что кроме jquery и bootstrap никаких другие клиентские библиотеки не подключается.

Я уже комментировал строки 28 и 29, убирал аттрибут data-loading-text, всё равно после нажатия происходит событие GET и я получаю в адресную строку :
http://77.777.777.777:3000/login?use...&password=pass

рони · #4 (**permalink**) 14.03.2014, 01:22

рони,
поменяйте button на text в строках 29 и 36 и возможно вам улыбнётся счастье

Faab · #5 (**permalink**) 14.03.2014, 01:47

неа, чудо не произошло. У меня такое впечатления что до выполнении ajax вообще не успевает дойти дело. Но я не могу это протестировать, так как все записи в консоле обновляются/стираются.

Вот весь конечный исходный код (с поправкой submit на text - c.70 и c.77):

<!DOCTYPE html>
<html>
<head>
  <title>Регистрация и вход</title>

  <link rel="stylesheet" href="/vendor/bower_components/bootstrap/dist/css/bootstrap.css"/>
  <link rel="stylesheet" href="/css/app.css"/>

  <script src="/vendor/bower_components/jquery/jquery.js"></script>
  <script src="/vendor/bower_components/bootstrap/dist/js/bootstrap.js"></script>
  
</head>
<body>
<header>
  
</header>
<section class="container">

  <nav class="navbar navbar-default" role="navigation">
  <ul class="nav navbar-nav">
    <li><a href="/">Главная</a></li>
    
    <li><a href="/chat">Чат</a></li>
    
  </ul>
  <ul class="nav navbar-nav navbar-right">
    
    <li><a href="" onclick="$('<form method=POST action=/logout>').submit();return false">Выйти</a></form></li>
    
  </ul>
</nav>

  <h1>Регистрация и вход</h1>

  
<p>Введите имя пользователя и пароль. Если такого пользователя нет - он будет создан.</p>

<form class="form-horizontal login-form" name="login-form">
  <div class="form-group">
    <label for="input-username" class="col-lg-2 control-label">Имя</label>

    <div class="col-lg-10">
      <input name="username" value="name" type="text" class="form-control" id="input-username" placeholder="Имя">
    </div>
  </div>
  <div class="form-group">
    <label for="input-password" class="col-lg-2 control-label">Пароль</label>

    <div class="col-lg-10">
      <input name="password" value="pass" type="password" class="form-control" id="input-password" placeholder="Пароль">
    </div>
  </div>
  <div class="form-group">
    <div class="col-lg-offset-2 col-lg-10">
      <button type="submit"  class="btn btn-primary" data-loading-text="Отправляю..." > Войти</button> 
      <span class="help-block error"></span>
    </div>
  </div>
</form>


</form>
-

<script>
  $(document.forms['login-form']).on('submit', function() {
    var form = $(this);

    $('.error', form).html('');
    $(":text", form).button("loading");

    $.ajax({
      url: "/login",
      method: "POST",
      data: form.serialize(),
      complete: function() {
        $(":text", form).button("reset");
      },
      statusCode: {
        200: function() {
          form.html("Вы вошли в сайт").addClass('alert-success');
          window.location.href = "/chat";
        },
        403: function(jqXHR) {
          var error = JSON.parse(jqXHR.responseText);
          $('.error', form).html(error.message);
        }
      }
    });
    return false;
  });
</script></section>
<footer>
  
</footer>
</body>
</html>

рони · #6 (**permalink**) 14.03.2014, 01:54

Faab,
я не вижу замены в вашем коде

Faab · #7 (**permalink**) 14.03.2014, 01:58

$(document.forms['login-form']).on('submit', function() {
    var form = $(this);

    $('.error', form).html('');
    $(":submit", form).text("loading");

    $.ajax({
      url: "/login",
      method: "POST",
      data: form.serialize(),
      complete: function() {
        $(":submit", form).text("reset");
      },
      statusCode: {
        200: function() {
          form.html("Вы вошли в сайт").addClass('alert-success');
          window.location.href = "/chat";
        },
        403: function(jqXHR) {
          var error = JSON.parse(jqXHR.responseText);
          $('.error', form).html(error.message);
        }
      }
    });
    return false;
  });

снова нет, снова GET

Faab · #8 (**permalink**) 14.03.2014, 02:07

Рони, а если вынесу кнопку submit за пределы формы (то есть станет просто кнопка), и повешу на этот элемент просто событие клик, то у меня стоит проблема, как мне заменить эту строчку тогда:

var form = $(this);

рони · #9 (**permalink**) 14.03.2014, 02:11

Faab,
url: "/login", это то сменили на то что вам нужно?

danik.js · #10 (**permalink**) 14.03.2014, 02:18

Сообщение от Faab

У меня такое впечатления что до выполнении ajax вообще не успевает дойти дело

Поставь точку останова в обработчике. Ну или алерт хотябы.

Сообщение от Faab

все записи в консоле обновляются/стираются

Ну так отключи. В хроме: правая кнопка мышы, Preserver log upon navigation.

Форум

Справочник

Discord чат

Курсы javascript