Question

在server.py中，我有一个跟踪名称的列表：

data = [
"Jim",
"Stanley",
"Michael",
"Kevin",
"Kelly"
]

执行{{data | tojson}}对我不起作用，因为这种格式的数据不可序列化。进行return render_template('ppc.html', data=data)似乎也没有让js文件访问server.py中的数据。我还尝试过'{{data}}'这种格式在某些帖子中使用过，但这些似乎都不起作用。有人有其他办法吗？

Answer 1

使用jsonify方法。它将启用从list返回view的功能。 jsonify的文档。

这是一个如何使用Java脚本在模板中加载数据的示例。

文件夹结构：

├── app.py
├── static
│   └── demo.js
└── templates
    └── simple.html

app.py：

from flask import Flask, render_template, jsonify

app = Flask(__name__)

@app.route("/get_data", methods=['GET'])
def get_data():
    data = ["Captain America", "Hulk", "Thor", "Wolverine"]
    return jsonify(data)

@app.route("/")
def index():
    return render_template("simple.html")

app.run(debug=True)

simple.html：

<html>
    <head>
        <title>Marvel Characters</title>
    </head>
    <body>
        <h3>List of Marvel Characters loaded from JS</h3>
        <div id="result"></div>
        <script src="{{ url_for('static', filename='demo.js') }}"></script>    
    </body>
</html>

demo.js：

window.addEventListener("load", function(){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var data = JSON.parse(this.responseText);
            var result = document.getElementById("result");
            for(var i=0;i<data.length; i++){
                result.innerHTML += data[i]+"<br>";
            }           
        }
    };
    xhttp.open("GET", "/get_data", true);
    xhttp.send();
});

输出：

如何将非JSON可序列化的数据从Flask传递到javascript文件？

1 个答案: