Flask变量未在HTML中显示

2024-10-17 06:12:56 发布

您现在位置:Python中文网/ 问答频道 /正文

我有一个小瓶子应用程序,我用它来:

  • 用HTML制作地图
  • 从HTML页面获取用户输入。。。在
  • 使用某些python模块对输入运行计算
  • 将这些变量返回到页面中的JS函数以填充映射

除了latlng之外,我无法得到任何东西来返回到我的HTML{{}}}flask变量中。在

这是我的HTML页面:

<!DOCTYPE html> <html lang="en"> <html> <head> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <title>Page Title</title> <meta charset="utf-8"/> <style> #mapid { height: 300px; } </style> <body> <form method="POST"> Latitude to PY: <input name="lat" id="lat"/> <br/> Longitude to PY: <input name="lng" id="lng"/> <br/> <button>Get data</button> </form> {% if lat1 != None and lng1 != None %} {{lat1}},{{lng1}} <script> var lat1 = {{lat1}} var lng1 = {{lng1}} </script> {% endif %} {% if point != None %} <p>{{point}}</p> {% endif %} {% if GeJ != None %} {{GeJ}} <script> var GeJ = {{GeJ}} </script> {% endif %} <div id="mapid"></div> <script> var mymap = L.map('mapid').setView([51.505, -0.09], 13); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', maxZoom: 18, id: 'mapbox.high-contrast', accessToken: 'pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZ2w4bWY5dTFueG0zM2w0dTNkazI1aWEifQ.55SWFVBYzs08EqJHAa3AsQ' }).addTo(mymap); function zoomTo() { mymap.panTo(new L.LatLng(lat1, lng1)); } function addGJ(){ var myLayer = L.geoJson(GeJ).addTo(mymap); } window.onload = zoomTo(); window.onload = addGJ(); </script> </body> </html>

这是我的Flask Python代码:

^{pr2}$

Flask应用程序运行良好,因此文件结构不受影响。我只是不能让任何其他变量返回到我的HTML中。我甚至试着制造一些字符串虚拟变量,而不是真正的。没有骰子。在

谢谢


Tags: httpscomnoneidvarhtmlscript页面
3条回答

您可以尝试使用内置的nonehttp://jinja.pocoo.org/docs/templates/#none

然后做一些类似的事情:

{% if lat1 is not none and lng1 is not none %}

如果您提供一个示例,说明当您传递所有值时发生了什么,这将有所帮助。在

否则,根据me,可能导致问题的原因是python中的“Null”对象是singleton None。检查事物是否“无”的最好方法是使用不是None或更好,例如:

{%if lat%}{lat}}{endif%}

另外,你不能把GeJ赋给div中的var GeJ,而不是突然地在上面放一行JS吗?在

注:我想把这作为一个评论,但没有足够的声誉。道歉。在

<!DOCTYPE html> <html lang="en"> <html> <head> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <title>Page Title</title> <meta charset="utf-8"/> <style> #mapid { height: 300px; } </style> <body> <form method="POST"> Latitude to PY: <input name="lat" id="lat"/> <br/> Longitude to PY: <input name="lng" id="lng"/> <br/> <button>Get data</button> </form> {% if lat1 is not Null and lng1 is not Null %} {{lat1}},{{lng1}} <script> var lat1 = {{lat1}} var lng1 = {{lng1}} </script> {% endif %} {% if point != None %} <p>{{point}}</p> {% endif %} {% if GeJ != None %} {{GeJ}} <script> var GeJ = {{GeJ}} </script> {% endif %} <div id="mapid"></div> <script> var mymap = L.map('mapid').setView([51.505, -0.09], 13); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', maxZoom: 18, id: 'mapbox.high-contrast', accessToken: 'pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZ2w4bWY5dTFueG0zM2w0dTNkazI1aWEifQ.55SWFVBYzs08EqJHAa3AsQ' }).addTo(mymap); function zoomTo() { mymap.panTo(new L.LatLng(lat1, lng1)); } function addGJ(){ var myLayer = L.geoJson(GeJ).addTo(mymap); } window.onload = zoomTo(); window.onload = addGJ(); </script> </body> </html>

和13;
和13;

相关问题 更多 >