Блог

Главная - Вопросы по программированию - Проверьте, доступно ли имя пользователя или нет с помощью Jquery, Ajax, в базе данных Flask и Sqlalchemy

Проверьте, доступно ли имя пользователя или нет с помощью Jquery, Ajax, в базе данных Flask и Sqlalchemy

#python #jquery #ajax #flask #sqlalchemy

#python #jquery #ajax #flask #sqlalchemy

Вопрос:

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

Помогите мне найти, что пошло не так, пожалуйста

в Script.js

 $(document).ready(function() {
  $("#username").on('input', function(e) {
    $('#msg').hide();
      $('#loading').show();
      if($('#username').val() == null || $('#username').val == ""){
      $('#msg').show();
      $('#msg').html("Username is required field.").css("color", "red");
      $('#loading').hide();
      }
      else{
        $.ajax({
          type: "POST",
          url: "/signup",
          data: $('#RegisterForm').serialize(),
          dataType: "html",
          cache: false,
          success: function(msg) {
           $('#msg').show();
           $('#loading').hide();
           $("#msg").html(msg);
          },
          error: function(jqXHR, textStatus, errorThrown) {
            $('#msg').show();
            $('#loading').hide();
            $("#msg").html(textStatus   " "   errorThrown);
          }
        });
      }
    });
  });

python в main.py

 @app.route('/signup', methods=['GET', 'POST'])
def signup():
    --------
        if request.method == 'POST' and form.validate_on_submit():
            user = User.query.filter_by(username=form.username.data).first()
            if user:
                resp = jsonify('<span style="'color:red;'">Username unavailable</span>')
                resp.status_code = 200
                return resp
            else:
                resp = jsonify('<span style="'color:green;'">Username available</span>')
                resp.status_code = 200
                return resp
            hashed_password = generate_password_hash(form.password.data, method='sha256')
            new_user = User(username=form.username.data, email=form.email.data, password=hashed_password)
            try:
                ---------
    else:
       -------
    return render_template('signup.html', form=form)

WTForms в html

HTML-код

 <form class="form-signin" method="POST" action="/signup">
    <h2 class="form-signin-heading">Sign Up</h2>
    {% for field, errors in form.errors.items() %}
      {{ ', '.join(errors) }}
    {% endfor %}
    {{ form.hidden_tag() }}
    {{ wtf.form_field(form.username) }}
    <div id="msg"></div>
    <span id="loading" style="display: none;"><img src="{{ url_for('.static', filename='images/loading.gif') }}"></span>
    {{ wtf.form_field(form.email) }}
    {{ wtf.form_field(form.password) }}
    {{ wtf.form_field(form.cpassword) }}
    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign Up</button>
  </form>

</div>

Комментарии:

1. вы пытались увидеть ошибки javascript в консоли DevTools JavaScript в Firefox / Chrome

2. вы запускали сервер в консоли / терминале, чтобы просмотреть все сообщения об ошибках?

3. использовали ли вы print() , чтобы увидеть, что вы получаете на сервере, что вы отправляете на сервер и какая часть кода выполняется? Это называется "print debuging"

4. Я вижу try в вашем коде, но .. используете ли вы print() in except для просмотра ошибок? Если вы используете except: pass , вы скрываете ошибку и не знаете, в чем проблема.

5. У вас есть if user: ... return resp else: ... return resp , что означает, что в этом месте он всегда будет выходить из этой функции и никогда не будет выполнять код после этого if/else — он никогда не будет запущен hashed_password = ... . Вы знаете, как это работает return ?

Ответ №1:

  1. Jsonify ожидает словарь.

jsonify({'message':'ok'}) вместо строки

  1. Вам нужно на серверной части что-то вроде этого:
 # api
@app.route("/check/<username>", methods=["GET"])
def check(username):
    has_username = db.session.query(exists().where(User.username == username)).scalar()
    return jsonify({"exists": has_username})

Затем в javascript

 $('#username-input-id').on('input', function() {
        $.getJSON( "/check/" $("#username-input-id").val(), function( data ) {
            $("#check").html("<i class='fa fa-list-alt'></i>");
            if (data['exists'] === true){
              $("#check").html("<i style='color:red;' class='fas fa-exclamation-triangle'></i>");
            }
        })
    });

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

  1. Кроме того, flask-wtf позволяет вам делать

{{ form.email() }}

вместо

{{ wtf.form_field(form.email) }}

если вы передали form=form в качестве переменной