Почему я не могу получить предупреждение, чтобы показать? - PullRequest
Новая
       24

Почему я не могу получить предупреждение, чтобы показать?

0 голосов
/ 09 февраля 2019

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

Итак, идея заключается в том, что при регистрации имя пользователя отправляется на python, где оно проверяется, если имя пользователя уже существует, если код вернет jsonify(False).Затем в javascript должно отображаться предупреждающее сообщение, если возвращаемое значение равно false.Но мой код не работает.

Python: 

@app.route("/check", methods=["GET"])
def check():
       """Return true if username available, else false, in JSON format"""
username = request.args.get("username")
rows = db.execute("SELECT * FROM users WHERE username = :username", username=username)
if len(rows) >= 1 or len(username) < 1:
    return jsonify(False)
else:
    return jsonify(True)

HTML: 

form action="/register" onsubmit="validateUsername()" method="post" id ="register">
        div class="form-group">
            input autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text">
        /div>
        div class="form-group">
            input class="form-control" name="password" placeholder="Password" type="password">
        /div>
        div class="form-group">
            input class="form-control" name="confirmation" placeholder="Confirm Password" type="password">
        /div>
        button class="btn btn-primary" id="submittion" type="submit">Register
    /form>
    script>
       let username = document.querySelector('input[name=username]');
       document.getElementById("submittion").addEventListener("click",function() {
            $.get('/check?username=' + username.value, function(data) {
                if (data==false){
                    data.preventDefault();
                    alert("Username is not available!");
                }
                else {
                   alert("not working");
                }
            });
        });</p>

<code></script>
</code>

Когда данные отправляются,пользователь должен быть предупрежден о том, что имя пользователя уже существует.

PS: я знаю, что пропустил некоторые из <, чтобы правильно отобразить мой HTML-код.

1 Ответ

0 голосов
/ 09 февраля 2019

Ajax-запрос отправляется при отправке, но у него недостаточно времени для получения ответа до отправки формы.Чтобы предотвратить отправку формы, вы можете использовать event.preventDefault: 

document.getElementById("submittion").addEventListener("click", function(event) {
  event.preventDefault();
  // The ajax call
});

Обновление

Возможно, вы хотите прослушать форму submit событие вместо кнопки click (например, для поддержки клавиатуры).Тем не менее, проблема заключается в том, что обработчик отправки должен «ждать» асинхронной проверки AJAX.

Чтобы сделать эту работу, вы можете отслеживать, проверен ли пользователь, и выполнить повторную отправку, отключив проверку (приведенный ниже непроверенный код): 

const form = document.getElementById("register");
const username = form.querySelector("input[name=username]");
let checkUser = true;

form.addEventListener("submit", function(event) {
  if (checkUser) {
    // Prevent the form from submitting
    event.preventDefault();

    // Check the username
    $.get("/check?username=" + username.value, function (data) {
      if (data === false) {
        alert("Username is not available!");
      } else {
        // Resubmit the form without the user check
        checkUser = false;
        form.submit();
        return;
      }
    });
  }

  // Reset the variable for the next check
  checkUser = true;
});

Альтернатива

Вы также можете отправить прямо на маршрут /register (через ajax) и выполнить там проверку / проверку.Когда все в порядке, вы можете зарегистрировать пользователя и вернуть true, в противном случае вернуть false, если проверка не удалась: 

form.addEventListener("submit", function(event) {
  // Prevent the form from submitting
  event.preventDefault();

  // Post the form data
  $.post(form.action, form.serialize(), function(data) {
    if (data === false) {
      // Register failed
      alert("Username is not available!");
    } else {
      // Register successfull
      window.location.replace("/welcome");
    }
  });
});

И, может быть, вы все-таки можете попытаться избежать JavaScript, выполнив все действия логики на стороне сервера, и обработать шаблонс ошибками формы.Но это выходит за рамки этого вопроса;)

...