Question

我是编程新手，想制作一个网页用于学习。

我想做的是在错误的登录详细信息上显示一条错误消息，提示“用户名/密码错误”。

实际上我已经做到了，但是最近我了解到更多有关使用javascript制作“单页应用程序”的信息，并正在尝试中。显然，它的优点是不需要加载太多次。

编辑：经过进一步考虑，我意识到我所拥有的也是某种“单页应用程序”，我的问题实际上更多是Javascript是否有可能在不呈现新HTML的情况下从Flask接收响应？

我想做一些事情，使我可以将表单数据“发布”到烧瓶（使用javascript），然后根据登录是否成功而接收True或False。如果不成功，我想在JavaScript中使用 .innerHTML给出错误消息，否则，我将重定向到正确的页面。这样做的目的是~~创建一个单页应用程序。~~防止再次呈现新的html模板

现在，我设法完全在没有JavaScript的情况下完成此操作，如下所示，但是只是想知道是否有一种如上所述的方法？谢谢您的帮助！

partial flasktest.py ＃/ check_login进行身份验证。 / login将显示首页并传递“无效”参数。

@app.route('/login')
def login_page():
    return render_template('frontpage_login.html', invalid = bool(request.args.get('invalid')))

@app.route('/check_login', methods = ['POST'])
def check_login():
    if request.method == 'POST':
        password = request.form['Password']
        username = request.form['Username']
        tempuser = User.query.filter_by(username = username).first()
        if tempuser is not None:
            if hashpass(password) == tempuser.password:

                login_user(tempuser)

                flash("Logged in successfully.")
                
                return redirect(url_for('home_page'))
       
    return redirect(url_for('login_page', invalid = True))

frontpage_login.html ＃基本是正常的登录页面，如果无效== true，则将呈现该消息。

{% extends 'frontpage_template.html' %}

{% block head %}
<a href="{{ url_for('front_page')}}">Home</a>
<div class = "currentlink"><a href="{{ url_for('login_page') }}">Login</a></div>
<a href="{{ url_for('register_page') }}">Register</a>
{% endblock %}



{% block content %}

<div class = "loginform">
<form action = "{{ url_for('check_login') }}" method = "POST">
    <label for="Username" autofocus>Username</label><br>
    <input type="text" id = "Username" name = "Username"><br>
    <label for="Password">Password</label><br>
    <input type="password" id = "Password" name = "Password"><br>
    <input id = "Login" type = "submit" value = "Login">
</form>
</div>

{% if invalid == True %}
<p class = 'error'>The username or password is invalid!</p>
{% endif %}


{% endblock %}

Answer 1

在服务器端，如果密码/用户名无效，则需要返回某种数据而不是重定向。

在具有JavaScript的客户端上，您可以将HTML表单作为AJAX调用发布，并在回调中显示消息。

无论如何，我建议您为此使用jQuery，因为它的功能大大简化了它。使用jQuery，基本的AJAX调用如下所示：

$('input#loginButton').click( function() {
    $.ajax({
        url: 'flask-url',
        type: 'post',
        dataType: 'json',
        data: $('form#loginForm').serialize(),
        success: function(data) {
             // display user dialog 
             $('#errorDialog').text('Incorrect username/password');
        }
    });
 });

如果您要使用纯JavaScript进行此操作，则可以执行以下操作：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
     // do innerHTML changes
     document.getElementById('errorDialog').innerHTML = "Incorrect username/password";
  }
};
xhttp.open('POST', 'flask-url', true);
xhttp.send();

onreadystatechanged表示您已收到服务器的某种响应

编辑：由于您询问何时使用Websocket或AJAX调用，this链接应该会对您有所帮助。

如果您想用Flask实现Websockets，我建议您使用flask-socketio，只需通过pip即可安装。

请随时询问是否仍然不清楚。

可以将烧瓶中的数据发送到Javascript吗？

1 个答案: