Javascript 如何使用ajax或表单将html5用户位置提交到django视图？_Javascript_Django_Ajax_Forms

Javascript 如何使用ajax或表单将html5用户位置提交到django视图？

javascript django ajax forms

Javascript 如何使用ajax或表单将html5用户位置提交到django视图？,javascript,django,ajax,forms,Javascript,Django,Ajax,Forms,我正在尝试使用ajax或表单将用户位置提交到基于Django类的视图。但我对Javascript和ajax的理解是有限的。如何向django cbv提交html5用户位置 views.py： class UserProfileView(CreateView): model = UserProfile fields = ['user_location'] template_name = 'rent_app/user_profile.html' html: {% bloc

我正在尝试使用ajax或表单将用户位置提交到基于Django类的视图。但我对Javascript和ajax的理解是有限的。如何向django cbv提交html5用户位置

views.py：

class UserProfileView(CreateView):
    model = UserProfile
    fields = ['user_location']
    template_name = 'rent_app/user_profile.html'

html:

{% block content %}
<body>
    {% leaflet_map "map" callback="ourfunction" %}
    
<div id="sidebar" class="sidebar collapsed">

    <form method="POST" action="{% url 'rent_app:add-location' %}">
            {{ csrf_token }}
            {% form.as_p %}
    </form>

</div>

<script type="text/javascript">

    var collection = {{ object_list|geojsonfeature:"popupContent"|safe }};
  console.log(collection);
  function onEachFeature(feature, layer) {
    if (feature.properties && feature.properties.popupContent) {
      layer.bindPopup(feature.properties.popupContent);
    }
  }

  function ourfunction(map, options) {
    
    map.locate({setView: true, maxZoom: 16});
    map.on('locationfound', onLocationFound);

    function onLocationFound(e) {
    var radius = e.accuracy;
    var position= e.latlng;
      
    L.marker(e.latlng).addTo(map)
        .bindPopup("You are within " + radius + " meters from this point").openPopup();

    L.circle(e.latlng, radius).addTo(map);
}
        function onLocationError(e) {
            alert(e.message);
        }

        map.on('locationerror', onLocationError);
            
    L.geoJson(collection, {onEachFeature: onEachFeature}).addTo(map);
    
}

</script>

class UserProfileModelForm(forms.ModelForm):   

    class Meta:
        model = UserProfile
        fields = ('id', 'user_location')
        widgets = {'geom': LeafletWidget(),'e':forms.HiddenInput()}