使用 Jquery、Ajax、Flask 和 Sqlalchemy 数据库检查用户名是否可用答案

【问题标题】：Check if username is available or not with Jquery, Ajax, in Flask and Sqlalchemy database使用 Jquery、Ajax、Flask 和 Sqlalchemy 数据库检查用户名是否可用
【发布时间】：2020-12-18 00:21:12
【问题描述】：

我正在尝试将 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);
          }
        });
      }
    });
  });

main.py 中的python

@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)

html 中的 WTForms

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>

【问题讨论】：

您是否尝试在 Firefox/Chrome 中 DevTools 的 JavaScript 控制台中查看 javascript 错误
您是否在控制台/终端中运行服务器以查看所有错误消息？
您是否使用print() 来查看您在服务器上获得了什么、发送到服务器的内容以及执行了哪部分代码？它被称为"print debuging"
我在您的代码中看到了try，但是..您在except 中使用print() 来查看错误吗？如果您使用except: pass，那么您会隐藏错误并且您不知道问题出在哪里。
你有if user: ... return resp else: ... return resp，这意味着在这个地方它总是会退出这个函数并且它永远不会在这个if/else之后执行代码——它永远不会运行hashed_password = ...。你知道return 的工作原理吗？

标签： python jquery ajax flask sqlalchemy

【解决方案1】：

Jsonify 需要字典。

jsonify({'message':'ok'}) 而不是字符串

您在后端需要这样的东西：

# 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 是一个持有者/跨度，如果用户名存在，则显示一个图标。使用您的代码对其进行自定义。

另外，flask-wtf 允许您这样做

{{ form.email() }}

而不是

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

如果您将form=form 作为变量传递

【讨论】：