时间戳

首页 > 解决方案 > 通过Javascript从python烧瓶获取数据到html

javascript - 通过Javascript从python烧瓶获取数据到html

问题描述

我正在学习数据科学，但对烧瓶、html 和 Js 还是很陌生。我开发了一个用于房价预测的 ML 模型，并希望将其部署到 Heroku。

问题是我在我的 python 烧瓶后端中传递的位置没有更新我前端的下拉菜单。

这是我的代码的重要部分。

服务器.py：

from flask import Flask, request, jsonify, render_template
app = Flask(__name__)

@app.route('/locations')
def locations():
    response = jsonify({
        'locations': get_location_names()
    })
    response.headers.add('Access-Control-Allow-Origin', '*')

    return response

应用程序.js

function onPageLoad() {
  console.log( "document loaded" );
  $.get("{{ url_for('locations') }}",
  function(data, status) {
  console.log("got response for locations request");
  if(data) {
      var locations = data.locations;
      var uiLocations = document.getElementById("uiLocations");
      $('#uiLocations').empty();
      for(var i in locations) {
          var opt = new Option(locations[i]);
          $('#uiLocations').append(opt);
      }
  }
  });

索引.html：

<!DOCTYPE html>
<html>
<head>
<title>Banglore Home Price Prediction</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" 
       type="text/javascript"></script>
<link rel="stylesheet" type= "text/css" href="{{url_for('static', filename = 'app.css')}}">
<script type="text/javascript" src ="{{url_for('static', filename = 'app.js')}}"></script>
</head>

浏览器控制台打印我放在 app.js 中的“已加载文档”，但没有从 server.py 获取数据。我认为问题出在 url_for 语句上，但不知道该怎么做。

标签： javascriptpythonhtmlflask

解决方案

您不能在作为静态资产加载的 js 文件中使用 jinja2 表达式。- v25

<script>您可以在 index.html 文件的标记中添加您的 Javascript 。或者你可以硬编码它。

我通常不使用这两种方法。相反，我在运行主应用程序之前使用自定义 python 脚本渲染所有文件。我使用 .bat 文件并键入所有需要的命令。你有时会使用 Sass 或任何其他需要渲染的东西......所以组织和编写这样的脚本很有帮助。如果您的 JavaScript 数据不会动态更改，请使用此方法。

但是，如果您的脚本是动态的，您可以添加一个路由，在每次请求时呈现您的文件。

@app.route('/my_script.js')
def script():
    return render_template('my_script.js', name='mark')

在您的/locations路线中：

<script src="{{url_for('script')}}"></script>

Jinja2 可以解析任何文件，无论其类型如何。

推荐阅读