Question

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

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

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中。通过使用不同的地理工具功能，我还为多边形内的stuf提供资金：

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);

      });
});

如何只渲染标记和线数据？

Answer 1

我解决了这个问题。成功取决于正确的问题）我在这里找到答案： Query ajax response not displaying when returning to current page

用烧瓶，ajax绘制传单后的渲染页面

1 个答案: