通过Javascript从python flask到html获取数据

如何解决通过Javascript从python flask到html获取数据

我正在学习数据科学，但是我仍然不熟悉烧瓶，html和Js。我已经开发了用于房屋价格预测的ML模型，并希望将其部署到Heroku。

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

这是我代码的重要部分。

server.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

app.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);
      }
  }
  });

index.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语句上，但不知道如何解决。

解决方法

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

您可以在index.html文件的<script>标签中添加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可以解析任何文件，无论其类型如何。

通过Javascript从python flask到html获取数据

如何解决通过Javascript从python flask到html获取数据

解决方法

相关推荐