将变量从 Flask 导入网页而不重新加载

Question

我想将变量 test_data 从 Flask 导入我的网页，而不重新加载它。只需单击一个按钮。但到目前为止我还没有成功。有什么想法吗？

烧瓶：

@blueprint.route('/data_analysis')
@login_required
def data_analysis():
    test_data = 'getting data from here' ### THIS VARIABLE
return render_template('index.html', test_data= test_data)

Javascript：

$("#load_data_btn").click(function(){

    var request = new XMLHttpRequest();
    request.open('GET', '/home/data_analysis', true);

    request.onload = function() {
    if (this.status >= 200 && this.status < 400) {
        var test_data = {{ test_data }};
        alert(test_data);
        // Success!
        var resp = this.response;
    } else {
    // We reached our target server, but it returned an error
    }};
    request.onerror = function() {
    // There was a connection error of some sort
    };
    request.send();
});

Answer 1

您似乎对 Jinja 感到困惑，它在将 html 和 javascript 文件发送到客户端之前渲染它，以及服务器端的东西。您正在做的是创建一个 html 文件，该文件将具有以下内容：

<script>
. . .
var test_data = "getting data from here"; # hard coded when user visits site 
alert(test_data);                         # rather than dynamically retrieved
. . .
</script>

但是你的代码可能没有到达这里，因为你的路由实际上并没有返回任何东西。

如果您不想要重新加载页面，您应该返回编码为 JSON 的变量，而不是渲染模板：

from flask import jsonify 

@blueprint.route('/data_analysis')
@login_required
def data_analysis():
    return jsonify({"value": "getting data from here"}) 

$("#load_data_btn").click(function(){
    $.getJSON("/home/data_analysis", function(response){
        alert(response["value"]);
    });
});