javascript - 如何使用 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 %}

但是，当我尝试在我的 View 中获取 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)

我怎样才能做到这一点，我知道获取纬度和经度是异步的，但我不知道如何处理这种情况。

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