AJAXを使用してdjangoサーバーに緯度と経度を送信する方法

Question

djangoを使用しています。要素をクリックするたびにAJAXを使用して緯度と経度を送信する必要があります。

これは私が私のテンプレートに持っているものである：私は私の見解でLATITUDの値を取得しようとすると、それが送信されなかったとして

{% 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 %} 

はしかし、私はエラーを取得しています：

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と目を取得していることを知っています私の経度は非同期なものですが、私はこのような状況にどう対処するのか分かりません。

Answer 1

あなたはそうです、それはajax/asyncの問題です。 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 %}