使用HTML、Flask和JSON动态显示动态数组——网页内容不全部刷新数据可视化数据流展示

最新推荐文章于 2024-05-26 23:24:00 发布

我爱喝伊利

最新推荐文章于 2024-05-26 23:24:00 发布

阅读量704

点赞数 14

分类专栏： HTML数据可视化文章标签： flask json python

本文链接：https://blog.csdn.net/weixin_67244432/article/details/137142156

版权

HTML数据可视化专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了如何在Flask框架中使用HTML和JSON实现动态数据的获取和前端展示，通过示例展示了如何从后端获取动态数组并将其在HTML的

元素中实时更新。

摘要由CSDN通过智能技术生成

Web开发中，我们经常需要动态地从后端获取数据并在前端展示。Flask是一个轻量级的Web框架，它允许我们轻松地创建Web应用。结合HTML和JSON，我们可以实现动态数据的展示。

下面是一个简单的例子，展示如何在Flask中获取动态数组，并使用JSON将这些数据发送到前端，最后在HTML的不同<div>元素中动态显示出来。

步骤1：创建Flask应用

首先，我们需要一个Flask应用来处理请求并返回数据。

from flask import Flask, render_template, jsonify  
  
app = Flask(__name__)  
  
# 假设我们有一个动态数组  
dynamic_array = ['Apple', 'Banana', 'Cherry', 'Date']  
  
@app.route('/')  
def index():  
    # 渲染HTML模板  
    return render_template('index.html')  
  
@app.route('/get_data', methods=['GET'])  
def get_data():  
    # 将动态数组转换为JSON格式并返回  
    return jsonify(data=dynamic_array)  
  
if __name__ == '__main__':  
    app.run(debug=True)

步骤2：创建HTML模板

接下来，我们创建一个HTML模板，用于展示数据。这个模板会包含一个JavaScript部分，用于从Flask应用获取数据，并在不同的<div>元素中显示。

在templates文件夹下创建index.html文件：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Dynamic Data Display</title>  
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  
</head>  
<body>  
  
<!-- 创建几个用于展示数据的div -->  
<div id="div1"></div>  
<div id="div2"></div>  
<div id="div3"></div>  
<div id="div4"></div>  
  
<script>  
    // 当文档加载完成后执行  
    $(document).ready(function() {  
        // 发送GET请求到Flask应用的'/get_data'路由  
        $.getJSON('/get_data', function(data) {  
            // 遍历返回的数据数组  
            $.each(data.data, function(index, item) {  
                // 根据索引将数据放入不同的div中  
                switch(index) {  
                    case 0:  
                        $('#div1').text(item);  
                        break;  
                    case 1:  
                        $('#div2').text(item);  
                        break;  
                    case 2:  
                        $('#div3').text(item);  
                        break;  
                    case 3:  
                        $('#div4').text(item);  
                        break;  
                    default:  
                        break;  
                }  
            });  
        });  
    });  
</script>  
  
</body>  
</html>

案列：

html获取flask中的动态数组，使用json在不同的div中动态显示出来，进行实时的刷新

python端代码：

from flask import Flask, jsonify, render_template  
import time  
import random  
  
app = Flask(__name__)  
  
# 假设这是你的动态数组，它会随时间变化  
dynamic_array = []  
  
@app.route('/')  
def index():  
    return render_template('index.html')  
  
@app.route('/get_dynamic_array')  
def get_dynamic_array():  
    global dynamic_array  
    # 这里模拟动态更新数组，实际应用中可能是从数据库或其他数据源获取数据  
    dynamic_array = [random.randint(1, 100) for _ in range(5)]  
    return jsonify(dynamic_array)  
  
if __name__ == '__main__':  
    app.run(debug=True)

然后，在HTML模板中（假设为index.html），你可以使用JavaScript的fetch API（或XMLHttpRequest，或jQuery的$.ajax等）来异步获取这个JSON数据，并在获取到数据后更新DOM。

HTML端代码：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Flask Dynamic Array Display</title>  
</head>  
<body>  
    <!-- 用于显示数组元素的div容器 -->  
    <div id="array-container"></div>  
  
    <script>  
        function fetchDynamicArray() {  
            // 发送GET请求到Flask的/get_dynamic_array端点  
            fetch('/get_dynamic_array')  
                .then(response => response.json()) // 解析JSON响应  
                .then(data => {  
                    const container = document.getElementById('array-container');  
                    // 清空旧的div内容  
                    container.innerHTML = '';  
                    // 为每个数组元素创建一个新的div并添加到容器中  
                    data.forEach(function(item) {  
                        const div = document.createElement('div');  
                        div.textContent = item;  
                        container.appendChild(div);  
                    });  
                })  
                .catch(error => console.error('Error:', error));  
        }  
  
        // 初始调用函数以获取并显示数组  
        fetchDynamicArray();  
  
        // 设置一个定时器来定期获取并更新数组（实现数据的实时刷新）  
        setInterval(fetchDynamicArray, 2000); // 每2秒更新一次  
    </script>  
</body>  
</html>

在这个例子中，fetchDynamicArray函数使用fetch API发送一个GET请求到Flask应用的/get_dynamic_array端点。一旦响应返回，它会被解析为JSON，然后遍历数组中的每个元素，为每个元素创建一个新的<div>并添加到页面上的array-container元素中。

此外，我们还设置了一个定时器（使用setInterval），它每两秒调用一次fetchDynamicArray函数，从而实现数据的实时刷新。你可以根据需要调整这个间隔时间。

请注意，这个例子假设你的Flask应用和HTML页面在同一个服务器上运行，因此可以直接使用相对URL（如/get_dynamic_array）来访问Flask端点。如果它们在不同的域或端口上运行，你可能需要处理跨域资源共享（CORS）问题。