可以將數據從 flask 發送到 Javascript？

Question

我是編程新手，想制作一個用於學習目的的網頁。

我想要做的是在登錄詳細信息不正確時顯示“用戶名/密碼不正確”的錯誤。

實際上我已經設法做到了，但是我最近了解了有關使用 javascript 制作“單頁應用程序”的更多信息，並且正在嘗試。 顯然它的優點是不需要加載這么多次。

編輯：經過進一步考慮，我意識到我所擁有的也是一種“單頁應用程序”，我的問題實際上更多的是 Javascript 是否有可能收到來自 Flask 的響應而無需呈現新的 Z4C4AD5FCA2E07A3F74ZAAEDB1

我想做一些事情，允許我將表單數據“發布”到 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 意味着你得到了服務器的某種響應

編輯：由於您詢問何時使用 Websockets 或 AJAX 調用此鏈接應該對您有所幫助。

如果你想用 Flask 實現 Websockets，我建議你使用flask-socketio ，你可以通過 pip 簡單地安裝它。

隨意詢問是否仍有不清楚的地方。