Flask 从Flask传递一个JSON对象给JavaScript

在本文中，我们将介绍如何使用Flask框架将一个JSON对象从后端Flask应用传递给前端JavaScript。通过这种方式，我们可以在Web应用中实现数据的传递和交互。

阅读更多：Flask 教程

什么是Flask？

Flask是一个用Python编写的轻量级Web框架，适用于构建简单而灵活的Web应用程序。它具有简单易学和灵活的特点，因此广受开发者的喜爱。Flask提供了许多功能丰富的扩展和插件，以帮助我们构建出令人印象深刻的Web应用。

传递JSON对象

Flask与JavaScript之间的JSON对象传递可以通过HTTP请求和响应来实现。在Flask中，我们可以使用jsonify函数将Python对象转换为JSON格式的响应。下面是一个示例，演示了如何在Flask应用中传递一个JSON对象给JavaScript：

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/')
def index():
    data = {
        'name': 'John',
        'age': 25,
        'city': 'New York'
    }
    return jsonify(data)

if __name__ == '__main__':
    app.run()

在上面的示例中，我们定义了一个Flask应用，并创建了一个路由/，当访问该路由时，返回一个JSON对象。在这个例子中，JSON对象表示一个人的姓名、年龄和所在城市。我们使用jsonify函数将Python字典转换为JSON格式的响应。

从JavaScript接收JSON对象

一旦我们将JSON对象从Flask传递给JavaScript，我们可以使用JavaScript的XMLHttpRequest对象来接收该JSON对象。下面是一个示例，演示了如何使用JavaScript接收从Flask传递的JSON对象：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);
        console.log(response.name);
        console.log(response.age);
        console.log(response.city);
    }
};
xhr.send();

在上面的示例中，我们创建了一个XMLHttpRequest对象，并使用open方法指定了GET请求的URL为根路径/。当请求状态为4，且状态码为200时，我们解析响应的文本，并打印JSON对象的属性值。

总结

在本文中，我们介绍了如何使用Flask框架将一个JSON对象从后端Flask应用传递给前端JavaScript。我们展示了如何在Flask应用中使用jsonify函数将Python对象转换为JSON格式的响应，并在JavaScript中使用XMLHttpRequest对象接收该JSON对象。通过这种方式，我们可以实现数据在后端和前端之间的传递和交互，为Web应用增加更多的功能和动态性。使用Flask和JavaScript的组合，我们可以构建出功能强大且用户友好的Web应用程序。

参考资料：
– Flask Documentation
– JSON and AJAX Tutorial: With Real Examples