javascript - 如何将从地理位置获取的城市名称存储到变量并发送 ajax 请求？

Question

<script>
      new Vue({ 
    el: '#fad' , 
    data: { 
      data: {}, 
    }, 
    mounted() { 
       var self = this;

      navigator.geolocation.getCurrentPosition(success, error);
      function success(position) {
        var GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + '%2C' + position.coords.longitude + '&language=en';
        $.getJSON(GEOCODING).done(function(location) {
        $('#country').html(location.results[0].address_components[5].long_name);
          $('#state').html(location.results[0].address_components[4].long_name);
          $('#city').html(location.results[0].address_components[2].long_name);
          $('#address').html(location.results[0].formatted_address);
          $('#latitude').html(position.coords.latitude);
          $('#longitude').html(position.coords.longitude);
        })

        var lat = position.coords.latitude;
        $.ajax({
          url: 'https://api/post//',
          data: {
            lat: position.coords.latitude,
            lon: position.coords.longitude,
            city:location.results[0].address_components[2].long_name,
          },
          type: "POST",
          dataType: 'json',
          success: function (e) { 
            if (e.status == 1) { 
              self.data = e.data; 
              console.log(e.data) 
            }
          }
        });
        console.log(lat);
      }

      function error(err) {
        console.log(err)
      }
    }
  })
</script>

这是我的代码。我能够获得纬度和经度值并通过。但我无法通过城市。当我这样做时，我收到错误。本人js很弱，第一次做项目。请帮助我获得结果。我需要通过 ajax 请求发送城市名称。 <span id="city"></city>在 html 中给我城市名称。如何在脚本中获取城市名称并通过 ajax 请求发送。请帮帮我好吗？

Answer 1

我认为您试图在错误的位置创建 AJAX 功能。 getCurrentPosition 是异步的，因此响应不一定立即可用 - 因此您尝试发送的 ajax 请求应该仅在从 getCurrentPosition

获得响应时发送>

<script>
    new Vue({ 
        el: '#fad' , 
        data: { 
            data: {}, 
        },
        mounted(){

            var self = this;
            navigator.geolocation.getCurrentPosition( success, error );


            function success( position ) {/* geolocation success callback */
                var GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + '%2C' + position.coords.longitude + '&language=en';
                $.getJSON( GEOCODING ).done( function( location ) {

                    $('#country').html(location.results[0].address_components[5].long_name);
                    $('#state').html(location.results[0].address_components[4].long_name);
                    $('#city').html(location.results[0].address_components[2].long_name);
                    $('#address').html(location.results[0].formatted_address);
                    $('#latitude').html(position.coords.latitude);
                    $('#longitude').html(position.coords.longitude);


                    /*

                        As this is an asynchronous process, make the 
                        ajax request here.

                    */
                    var lat = position.coords.latitude;
                    console.log( lat );

                    $.ajax({
                        url: 'https://api/post//',
                        data: {
                            lat: position.coords.latitude,
                            lon: position.coords.longitude,
                            city: location.results[0].address_components[2].long_name,
                            state: location.results[0].address_components[4].long_name,
                            country: location.results[0].address_components[5].long_name
                        },
                        type: 'POST',
                        dataType: 'json',
                        success: function(e) { 
                            if( e.status == 1 ) { 
                                self.data = e.data; 
                                console.log( e.data ) 
                            }
                        }
                    });
                });
            }

            function error( err ) {/* geolocation error callback */
                console.log( err )
            }
        }
    });
</script>