将 JSON 数据从 Flask 发送到前端答案

【问题标题】：Sending JSON data from Flask to Front-end将 JSON 数据从 Flask 发送到前端
【发布时间】：2023-03-30 05:52:01
【问题描述】：

这里有没有 Flask 经验的人？我目前正在研究我的 uni 项目，“COVID-19 跟踪器”。目前我正在尝试将数据从 Flask 发送到 JS 并用该数据填充一个表。但我得到的只是没有结果。请帮我。我必须刷新和删除缓存，但它根本没有任何变化。

烧瓶代码：

from flask import Flask, render_template
import requests

app = Flask(__name__)

@app.route('/')
def index():
    world_data_latest = get_world_data()
    return render_template('index.html', world_data_latest = world_data_latest)


def get_world_data():
    url = "https://covid-193.p.rapidapi.com/statistics"

headers = {
    'x-rapidapi-host': "covid-193.p.rapidapi.com",
    'x-rapidapi-key': "51896eb81amsh2a57d7238e4a57ep137532jsn106ff7f478ab"
    }

response = requests.request("GET", url, headers=headers)
return response.json()

if __name__ == "__main__":
    app.run(debug=True)

JavaScript 代码：

data = JSON.parse('{{ world_data_latest | safe}}')

var table = document.getElementById('world_table');
a = 0
data.forEach(function(object) {
   var tr = document.createElement('tr');
    tr.innerHTML = '<td>' + 0 + '</td>' +
        '<td>' + object.response.country + '</td>' +
        '<td>' + object.response.cases.new + '</td>' +
        '<td>' +  object.response.cases.active + '</td>' +
        '<td>' +  object.response.cases.recovered + '</td>'
        '<td>' +  object.response.cases.recovered + '</td>'
        '<td>' +  object.response.cases.deaths.total + '</td>'
        '<td>' +  object.response.cases.total + '</td>';
   table.appendChild(tr);
});

HTML：

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>COVID-19 tracker application</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" src="{{ url_for('static', filename='css/style.css') }}" type="text/css">
    <script rel="stylesheet" src="{{ url_for('static', filename='js/script.js') }}"></script>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top navbar-custom">
        <span class="mb-0 h2">COVID-19 tracker</span>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav ml-auto">
            <a class="nav-item nav-link active" href="#world">World</span> <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#uk">United Kingdom</a>
            <a class="nav-item nav-link" href="#scotland">Scotland</a>
          </div>
        </div>
      </nav>
      <div class="world">
          <div class="table" id="world_table">
            <table class="world_table" id="world_table">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">Country</th>
                    <th scope="col">New</th>
                    <th scope="col">Active</th>
                    <th scope="col">Recovered</th>
                    <th scope="col">Deaths</th>
                    <th scope="col">Total</th>
                  </tr>
                </thead>
              </table>
          </div>

      </div>
    </body>
 </html>

【问题讨论】：

标签： javascript python json web flask

【解决方案1】：

我假设您希望在向 Flask 发出 API 请求时返回一个 JSON 字符串并在 JavaScript 端使用它。

您可以添加一个额外的应用程序路由，如下所示，您可以从该路由在 python 端接收数据。

@app.route('/testing')
def testing():
    return '{"batman": 1}'

假设您希望在 div 元素中显示 HTML 端的文本，如下所示。

<div id="receivedData"></div>

您可以使用以下 JavaScript sn-p 向我们之前创建的 API 点发送请求，并在上述 HTML 元素中显示返回的文本。

const url = window.location.href + 'testing';

fetch(url).then(res => res.json()).then(data => {
   // Printing that data to a div in HTML
   document.getElementById('fullscreen').innerText = data;
})

我希望这将使您能够推进您的项目。

问候，泽宁

【讨论】：