如何使用AJAX發送經緯度到Django服務器

Question

我正在使用Django，我需要發送緯度和縱向使用AJAX每次我點擊一個元素。

這是我在我的模板：

{% block js %} 
    <script> 
     var latitud; 
     var longitud; 

     if ("geolocation" in navigator) { 
     navigator.geolocation.getCurrentPosition(
      function (position) { 
       console.log('Position has been set successfully'); 
       latitud = position.coords.latitude; 
       longitud = position.coords.longitude; 
      }, function (error) { 
       console.log('Position could not be obtained.') 
      }); 
     } 
     dataToSend = { 
      "fbpost": $("input[name=fb-post]").is(':checked'), 
     "latitude": latitud, 
     "longitude": longitud 
     }; 

     var csrftoken = "{{ csrf_token }}"; 

     function csrfSafeMethod(method) { 
     // these HTTP methods do not require CSRF protection 
     return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); 
     } 

     $.ajaxSetup({ 
     beforeSend: function(xhr, settings) { 
      if (!csrfSafeMethod(settings.type) && !this.crossDomain) { 
      xhr.setRequestHeader("X-CSRFToken", csrftoken); 
      } 
     } 
     }); 

     $.ajax(
     { 
      type: "POST", 
      dataType: 'json', 
      url: {% url 'pledges:home' %}, 
      data: JSON.stringify(dataToSend), 
      success: function (msg) { 
      console.log('Succeeded!');    
      }, 
      error: function (err) { 
      console.log('Error!'); 
      } 
     }); 
    }); 
    </script> 
{% endblock %} 

但是，當我試圖讓的latitud的價值在我看來，我得到一個錯誤，因爲它未發送：

KeyError: 'latitude'

這是我在我的視圖代碼：

@login_required 
def home(request): 
    request_body = json.loads(request.body.decode('utf-8')) 
    print(request_body['latitude']) 

    # mode code 

    return render(request, 'pledges/home.html', context) 

我怎樣才能做到這一點，我知道獲得latitud和TH縱向是異步的，但我不知道如何處理這種情況。

Answer 1

你是對的，這是一個Ajax /異步問題。所有使用getCurrentPosition結果的應該在該回調函數中，或者分成一個由回調調用的新函數。您可重複使用的功能可以在外面移動，以便它們在全球範圍內使用，以防需要再次使用它們。例如：

{% block js %} 
    <script> 
     function csrfSafeMethod(method) { 
     // these HTTP methods do not require CSRF protection 
     return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); 
     } 

     $.ajaxSetup({ 
     beforeSend: function(xhr, settings) { 
      if (!csrfSafeMethod(settings.type) && !this.crossDomain) { 
      xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}"); 
      } 
     } 
     }); 

     if ("geolocation" in navigator) { 
     navigator.geolocation.getCurrentPosition(
      function (position) { 
      console.log('Position has been set successfully'); 

      dataToSend = { 
       "fbpost": $("input[name=fb-post]").is(':checked'), 
       "latitude": position.coords.latitude, 
       "longitude": position.coords.longitude 
      }; 

      $.ajax({ 
       type: "POST", 
       dataType: 'json', 
       url: {% url 'pledges:home' %}, 
       data: JSON.stringify(dataToSend), 
       success: function (msg) { 
       console.log('Succeeded!');    
       }, 
       error: function (err) { 
       console.log('Error!'); 
       } 
      }); 
      }, function (error) { 
       console.log('Position could not be obtained.') 
      } 
     ); 
     } 
    </script> 
{% endblock %}