Нельзя использовать функцию preventDefault() с if, else

ProgramBox

Нельзя использовать функцию preventDefault() с if, else

Post author:admin
Запись опубликована:22 января, 2022
Post category:Вопросы по программированию

#javascript #jquery #preventdefault

Вопрос:

$.get в приведенном ниже коде возвращает логическое значение в формате JSON с именем data . Но независимо от того, является ли значение data false или true preventDefault() , отправка формы в любом случае невозможна.

 $(document).ready(function() {
  $("#username").blur(function() {
    let username = document.getElementById("username").value;
    
    $.get("/check", {
      username_value: username
    }, function(data) {
      alert(data);
      
      $("#submit").click(function(e) {
        if (data) {
          e.preventDefault();
        } else if (!data) {
          e.submit();
        }
      });
    });
  });
});

И это часть /проверка

 @app.route("/check", methods=["GET"])
def check():
    """Return true if username available, else false, in JSON format"""
    get_username = request.args.get("username_value")

    users = db.execute("SELECT username FROM users")

    lenght = len(get_username)
    i = 0
    for user in users:
        if get_username == users[i]["username"] or not lenght > 1:
            return jsonify(True)
        i  = 1

    return jsonify(False)

Кстати, я очень новичок в бизнесе кодирования. Спасибо за помощь.

1. На что это alert(data) похоже? Я держу пари, что это строка или что-то в этом роде, а не логическое значение

2. data будет строкой, поэтому она всегда будет приводить к истинному значению, если оно не пустое, однако вы возвращаете 'true' или 'false' так, что это не будет иметь места. Я настоятельно рекомендую вам вернуть структурированный формат данных, такой как JSON, чтобы избежать этой проблемы и использовать логическое значение для значения. Кроме того e.submit() , это приведет к ошибке, так как событие не имеет submit метода. Его else можно полностью удалить.

3. Я думал, что часть данных работала, потому что, когда я подключаюсь e.preventDefault(); , и e.submit(); с alert(data); ее помощью отображается сообщение, которое я хочу видеть: правда или ложь

4. Правильно, но они будут строками, а не логическими, и приведение типа будет означать, что оба 'true' и 'false' = true . Вот почему использование alert() для отладки не является хорошей практикой. console.log() Вместо этого используйте и используйте логическое значение структурированного типа для ответа на ваш вызов AJAX.

5. Оказывается data , это было логическое значение все время. Просто проверил его, typeof и в результате он вернул логическое значение. Есть еще какие-нибудь идеи? Спасибо за советы кстати 🙂

Ответ №1:

Попробуйте изменить, чтобы захватить событие из идентификатора формы вместо кнопки таким образом:

 $("#form").submit(function (e) {
  if (!data) {
    e.preventDefault();    
  } else {
    e.submit();
  }
});

e.отправить() необходимо использовать в случае из отправленной формы.

Убедитесь, что данные имеют логический тип. и не забудьте изменить селектор на свой идентификатор формы.

1. Я почти уверен data , что это логическое значение, потому что я проверил его, typeof и благодаря вам я изменил событие с идентификатора формы на идентификатор тега формы, но это тоже не сработало. Спасибо за ваш совет, тхо.

Ответ №2:

Я решаю проблему, заменив $.get на $.ajax . Я предполагаю, что проблема заключалась в том, что $.get работает только асинхронно. Поэтому я использовал $.ajax асинхронный параметр в false. Тогда это сработало так, как я хочу.

Последняя версия кода:

 $(document).ready(function() {
          $('#form').submit(function(e){
              let username = document.getElementById("username").value;
              let password = document.getElementById("password").value;
              let confirmation = document.getElementById("confirmation").value;
              var boolean_data;
              $.ajax({url: "/check?username="   username, type: 'get', async: false, success: function(data){boolean_data=data;}});

              if(!boolean_data) {
                alert("""   username   """   " username is already taken.");
                e.preventDefault();
              }
              else if(!password || !confirmation) {
                  alert("Pls povide a password and confrim it");
                  e.preventDefault();
              }
              else if(password != confirmation) {
                  alert("Passwords don't match");
                  e.preventDefault();
              }

          });
      });

Спасибо всем, кто прокомментировал и ответил на мой вопрос.