Django客户端地理坐标重复提交问题：如何实现仅单次提交

问题分析 #

你遇到的无限刷新问题，核心原因是每次页面加载（包括表单提交后的页面重渲染）都会触发DOMContentLoaded事件，进而再次提交表单，形成了一个循环：页面加载→提交表单→页面刷新→再次加载→再次提交……

下面给你两种实用的解决方案，你可以根据需求选择：

方案一：前端本地存储标记（快速实现） #

利用浏览器的sessionStorage存储一个提交状态标记，第一次提交后就标记为已完成，后续页面加载时检测到标记就不再执行提交逻辑。同时我帮你优化了原有的JS代码，把两个获取经纬度的函数合并，避免重复调用地理定位API，更高效：

修改你的index.html代码：

{% extends 'weather/base.html' %}
{% block content %}
<form method="POST" id="geoform" name="geoform">
    {% csrf_token %}
    {{ form.latitude }}
    {{ form.longitude }}
</form>
<script>
    // 合并地理定位逻辑，避免重复调用API
    function fetchAndSubmitCoords() {
        if (!navigator.geolocation) {
            alert("Sorry, your browser does not support HTML5 geolocation.");
            return;
        }

        navigator.geolocation.getCurrentPosition(function(position) {
            // 填充经纬度到隐藏输入框
            document.getElementById('latitude').value = position.coords.latitude;
            document.getElementById('longitude').value = position.coords.longitude;
            
            // 检查是否已经提交过
            const hasSubmitted = sessionStorage.getItem('geoFormSubmitted');
            if (!hasSubmitted) {
                document.getElementById("geoform").submit();
                // 标记为已提交，会话内有效（关闭浏览器后重置）
                sessionStorage.setItem('geoFormSubmitted', 'true');
            }
        });
    }

    document.addEventListener("DOMContentLoaded", function(event) {
        fetchAndSubmitCoords();
    });
</script>
{% endblock content %}

说明：sessionStorage的标记是会话级别的，用户关闭浏览器后标记会自动清除，下次打开页面会重新触发提交；如果需要持久化标记（比如用户再次打开浏览器也不再提交），可以把sessionStorage换成localStorage。

方案二：后端控制提交状态（更可靠） #

如果担心用户清除浏览器存储导致逻辑失效，或者需要更严格的状态控制，可以让后端在处理完表单后，向前端传递一个「已提交」的状态变量，前端根据这个变量决定是否执行提交逻辑：

第一步：修改Django视图函数

def index(request):
    # 初始化提交状态为未提交
    is_submitted = False
    if request.method == 'POST':
        cords_form = CordsForm(request.POST)
        if cords_form.is_valid():
            latitude = cords_form.cleaned_data['latitude']
            longitude = cords_form.cleaned_data['longitude']
            print(longitude) # 测试用
            print(latitude) # 测试用
            # 标记为已提交
            is_submitted = True
    else:
        cords_form = CordsForm()
    # 把状态变量传递给模板
    return render(request, 'weather/index.html', {'form': cords_form, 'is_submitted': is_submitted})

第二步：修改前端模板

{% extends 'weather/base.html' %}
{% block content %}
<form method="POST" id="geoform" name="geoform">
    {% csrf_token %}
    {{ form.latitude }}
    {{ form.longitude }}
</form>
<script>
    function fetchAndSubmitCoords() {
        if (!navigator.geolocation) {
            alert("Sorry, your browser does not support HTML5 geolocation.");
            return;
        }

        navigator.geolocation.getCurrentPosition(function(position) {
            document.getElementById('latitude').value = position.coords.latitude;
            document.getElementById('longitude').value = position.coords.longitude;
            // 只有未提交过才执行提交
            document.getElementById("geoform").submit();
        });
    }

    document.addEventListener("DOMContentLoaded", function(event) {
        // 后端传递的变量控制是否执行提交逻辑
        {% if not is_submitted %}
        fetchAndSubmitCoords();
        {% endif %}
    });
</script>
{% endblock content %}

说明：这种方案的状态由后端控制，完全不受前端存储的影响，适合对提交逻辑有严格要求的场景。

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