Django中如何实现Folium地图弹窗内嵌表单的提交？

核心问题 #

你遇到的两个问题根源一致：Python视图中拼接的HTML字符串里的Django模板标签（{% url %}、{% csrf_token %}）不会被Django模板引擎解析。因为这段HTML是直接作为字符串生成后嵌入Folium弹窗，没有经过Django模板的渲染流程，所以模板标签会被当作普通文本处理，导致unknown tag 'url'错误，同时CSRF令牌无效，表单提交失败。

修复步骤与代码示例 #

1. 导入必要工具 #

在视图文件顶部添加以下导入：

from django.urls import reverse
from django.middleware.csrf import get_token

2. 修改视图中的HTML生成逻辑 #

替换原有的html字符串生成代码，用Python代码直接生成URL和CSRF令牌，同时修正坐标变量的语法：

def monitoring(request, pk):
    # 假设lat和lng已在其他地方定义
    map = folium.Map(location=[lat, lng], zoom_start=15)

    # 用reverse生成目标URL，代替模板标签{% url 'index' %}
    form_action_url = reverse('index')
    # 用get_token获取当前请求的CSRF令牌，代替模板标签{% csrf_token %}
    csrf_token = get_token(request)

    # 用Python f-string填充变量，注意去掉${}换成{}
    html = f"""
    <form action="{form_action_url}" method="POST">
        <input type="hidden" name="csrfmiddlewaretoken" value="{csrf_token}">
        <div class="form-group">
            <label for="note_heading">Note heading</label>
            <input type="text" name='note_heading' class="form-control">
        </div>
        
        <input type="hidden" name="lat" value="{lat}">
        <input type="hidden" name="lng" value="{lng}">
        
        <div class="form-group">
            <label for="note">Note</label>
            <textarea class='form-control' name="note_des">Enter note here</textarea>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    """
    iframe = folium.IFrame(html, width=200, height=300)  # 调高高度适配表单
    popup = folium.Popup(iframe, max_width=300)
    marker = folium.Marker([lat, lng], popup=popup, draggable=True).add_to(map)
    map_html = map._repr_html_()

    context = {"lat": lat, "lng": lng, "map": map_html}
    return render(request, "maps/monitoring.html", context)

3. 关键修改点说明 #

• URL生成：使用reverse('index')在Python代码中直接解析URL名称对应的路径，避免依赖模板标签。
• CSRF令牌：通过get_token(request)获取当前请求的有效CSRF令牌，手动添加为隐藏输入框，确保表单提交通过Django的CSRF验证。
• 坐标变量：将原有的${lat}改为{lat}，符合Python f-string的语法规则，正确注入坐标值。
• 弹窗高度：适当调高IFrame的高度，避免表单内容被截断。

额外注意事项 #

• 确保'index'是你在urls.py中正确定义的URL名称，reverse函数才能正常解析。
• 表单提交的目标视图（即index对应的视图）需要处理POST请求，接收note_heading、note_des、lat、lng这些参数。

内容的提问来源于stack exchange，提问作者Khalid Seflan