Проблема с отправкой данных на стороне клиента на сервер (django)

Question

Я пытаюсь отправить данные на стороне клиента (html5 api для широты и долготы) на сторону сервера.Я не знаком с JS, но нашел код для двух функций 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, которая будет получать данные:

class CordsForm(forms.Form):
    latitude = forms.CharField(widget=forms.TextInput(
        attrs={'id': 'latitude', 'type': 'hidden'}))
    longitude = forms.CharField(widget=forms.TextInput(
        attrs={'id': 'longitude', 'type': 'hidden'}))

ТакжеЯ создал представление, которое использует форму:

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

как это:

var check = localStorage.getItem('posted');
if(check !== 'true'){
document.addEventListener("DOMContentLoaded", function (event) {
        document.getElementById("geoform").submit();
localStorage.setItem('posted','true')
}

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