javascript/jquery $.get 和 python 后端的挑战

Question

我有一个 HTML 表单来输入用户名/密码来注册网站。我正在尝试实现 javascript/JQuery $.get 以发送 HTTP GET 以检查用户名是否已在使用中。在服务器端，“用户名”值（由 request.form.get() 提取）返回为 None。 javascript 源代码在 HTML 页面上似乎也没有响应。

Javascript如下：

var username = document.getElementById("username");
var inputForm = document.getElementById("form");

document.getElementById("submit").addEventListener("click", function(event) {
             event.preventDefault()
});

inputForm.onclick = function(data) {
    $.get("/check?username=" + username.value, function() {
        alert("CHECKING")
        if (data == false) {
            inputForm.submit();
        }
        else {
            alert("Sorry - that username is taken!");
        }
    });
};

后端的 Python (Flask) 如下：

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

print("***RUNNING CHECK***")
# get username from web form
username = request.form.get("username")
print(username)

# check that username is longer than 1, then pull list from DB to check against
if len(username) > 1:
    usernames = db.execute("SELECT username FROM users")

# return false if username is available
if username in usernames:
    return jsonify(False)

# return true if username is NOT available
else:
    return jsonify(True)

这是回来的：

TypeError: 'NoneType' 类型的对象没有 len() INFO:werkzeug:192.168.179.21 - - [22/Aug/2019 16:20:41] "GET /check?username=ajd HTTP/1.0" 500 -

Answer 1

我能看到的客户端问题是……

• 检查 Javascript 控制台可能会告诉您 data 未定义。如果应该作为参数添加到回调函数中。
• 您需要使用 encodeURIComponenet 转义 get 参数。
• 您可能希望在收到输入而不是在单击表单时运行此代码。

username.oninput = function(data) {
  $.get("/check?username=" + encodeURIComponenet(username.value), function(data) {
    alert("CHECKING")
    if (data == false) {
      inputForm.submit();
    } else {
      alert("Sorry - that username is taken!");
    }
  });
};