javascript - 使用烧瓶、ajax 绘制传单后重新渲染页面

问题描述

嗨，我正在开发一个带有 Flask 和 Leaflet 地图的应用程序。地图上有几何对象。在绘图工具的帮助下，用户在地图上绘制多边形形状，并且所有落在形状内的对象数据（即“id”）都应该在 html 表中呈现。绘制形状后，POST 请求就完成了。虽然我可以在 traceback 中打印出数据并在 Devtools Network Preview 选项卡中看到它，但我仍然无法在 html 中呈现这些数据。

这是我在绘制形状后发送 Post 请求的 JS 代码。输出给出形状顶点坐标。

mymap.on('pm:create', e => {
    var map_data = e["layer"]["_latlngs"][0];
    console.log(map_data);
    $.ajax({
      type: "POST",
      contentType: "application/json",
      url: "/",
      traditional: "true",
      data: JSON.stringify({map_data}),


      });
});

然后我用这个坐标分配一个变量并在 app.py 中打印出来。使用不同的地理工具功能，我还资助了多边形内的东西：

shape_coord = request.get_json() //gets shape coordinates

if shape_coord:
 filter_markers = marker_within_polygon(markers, shape_coord) //function finds markers within shape
 filter_lines = lines_within_polygon(lines, shape_coord)//function finds lines within shape

 print(shape_coord)// OK
 print(filter_markers, filter_lines)//OK. prints out stuff inside polygon

这是我的 jinja2：

<tbody id="table_body">

                        {% for mk in  filter_markers%}
                            <tr>
                                {% for ln in filter_lines %}
                                     <th>{{ ln }}</th>
                                     <th>{{ mk }}</th>
                                {% endfor %}
                             </tr>
                        {% endfor %}
 </tbody>

我尝试像这样在 Ajax 中使用成功回调，但除了所需的数据之外，它还会在表中插入整个 HTML 正文标记：

mymap.on('pm:create', e => {
    var map_data = e["layer"]["_latlngs"][0];
    console.log(map_data);
    $.ajax({
      type: "POST",
      contentType: "application/json",
      url: "/",
      traditional: "true",
      data: JSON.stringify({map_data}),
      success: function (data) {
                    $("#table_body").html(data);

      });
});

我怎样才能只渲染我的标记和线条数据？

标签： javascriptpythonajaxflaskleaflet

javascript - 使用烧瓶、ajax 绘制传单后重新渲染页面

问题描述

解决方案

推荐阅读