将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"]);
    });
});