将客户端数据发送到服务器端（Django）时出现问题

Question

我试图将客户端数据（经纬度的html5api）发送到服务器端。我不熟悉JS，但我找到了纬度和longtitude两个JS函数的代码：

function latitude() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            return document.getElementById('latitude').setAttribute("value", position.coords.latitude);
        }
        );
    }
    else {
        alert("Sorry, your browser does not support HTML5 geolocation.");
    }
}
function longitude() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            return document.getElementById('longitude').setAttribute("value", position.coords.longitude);
        }
        );
    }
    else {
        alert("Sorry, your browser does not support HTML5 geolocation.");
    }
}

然后我创建了django表单，它将接收数据：

^{pr2}$

我还创建了一个视图，它使用以下形式：

def index(request):
    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) # only for testing
            print(latitude) # only for testing
    else:
        cords_form = CordsForm()
    return render(request, 'weather/index.html', {'form': cords_form})

这是索引页：

{% extends 'weather/base.html' %}
{% block content %}
<form method="POST" id="geoform" name="geoform">
    {% csrf_token %}
    {{ form.latitude }}
    <script>latitude();</script>
    {{ form.longitude }}
    <script>longitude();</script>
</form>
<script>
    document.addEventListener("DOMContentLoaded", function (event) {
        document.getElementById("geoform").submit();
    });
</script>
{% endblock content %}

每次用户访问索引页时，纬度和经度都会通过表单自动发送，但以下代码：

<script>
    document.addEventListener("DOMContentLoaded", function (event) {
        document.getElementById("geoform").submit();
    });
</script>

发送数据，但它正在刷新页面，就像我在垃圾邮件F5按钮。当索引页被访问时，如何才能只发送一次数据？在

Answer 1

您应该本地存储：

当你想把数据发送到服务器时，检查一下，如果你没有这个功能，就可以把它发送出去

您应该在检查本地存储的if语句中使用此代码，然后运行以下命令：

document.addEventListener("DOMContentLoaded", function (event) {
        document.getElementById("geoform").submit();

像这样：

^{pr2}$

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage