Question

我尝试使用他们的API和Ajax访问地质网站数据以从中检索。

＆＃13;

var location;
var titleName;
$(document).ready(function() {
  $('#earthquakes').click(function() {

    function getQuakes() {
      $.ajax({
        url: "http://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2014-01-01&endtime=2014-01-02",
        function(data) {
          $.each(data.features, function(key, val) {
            var coord = val.geometry.coordinates;
            location = {
              lat: coord[0],
              lng: coord[1]
            };
            titleName = val.properties.title;
          });
        }
      });
    }
    console.log(location);
    console.log(titleName);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="earthquakes">Click me</button>

＆＃13;

在结果中，当我点击＆＃34;地震＆＃34;按钮，它记录两行：

＆＃34;位置{hash：＆＃34;＆＃34;，搜索：＆＃34;＆＃34;，路径名：＆＃34; /＆＃34;，端口：＆＃34; 8888＆＃34 ;, 主机名：＆＃34; localhost＆＃34; ...}＆＃34;

和

未定义

我似乎用我的功能定位了正确的参数，但是，它仍然没有得到我需要的数据。这里仅供参考，是他们的文档：http://earthquake.usgs.gov/fdsnws/event/1/ 但我相信问题可能是其他问题，我可能会对变量及其使用方式做错。

Answer 1

看起来您正在尝试访问AJAX成功回调之外的那些变量。请记住，AJAX是异步的，因此这个回调可以在比console.log语句更晚的时间执行。因此，基本上如果要检索这些值，最好的位置是在成功回调中，并且不要在外部作用域中声明这两个变量。

还要记住你有一个JSON数组而不仅仅是一个地震数据（不幸的是）。所以将这些结果存储在javascript数组变量中：

$(document).ready(function() {
    $('#earthquakes').click(function () {
        function getQuakes(callback) {
            $.ajax({
                url: "http://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2014-01-01&endtime=2015-01-02",
                function(data) {
                    var results = [];
                    $.each(data.features, function(key, val) {
                        var coord = val.geometry.coordinates;
                        var titleName = val.properties.title;
                        var quakeData = {
                            location: {
                                lat: coord[0],
                                lng: coord[1]
                            },
                            title: titleName
                        };

                        results.push(quakeData);
                    });

                    // Invoke the callback and pass it the results array
                    callback(results);
                }
            });
        }

        // Now call the getQuakes function and pass it a callback that
        // will be passed as argument the result array
        getQuakes(function(data) {
            // At this stage the result variable will contain an array
            // of javascript objects with location and title properties that
            // we constructed in our AJAX success callback. So here we can
            // do something with those results, like dumping them to the console
            console.log(data);
        });
    });
});

显然在这个例子中我们没有处理来自AJAX调用的错误事件，这是你可能想要做的事情，这样你就可以在从远程服务器检索这些信息时通知用户出现了问题。 / p>

Answer 2

尝试以下代码 -

    var location;
    var titleName;
    $(document).ready(function() {
     $('#earthquakes').click(function (){
     $.ajax({
        url: "http://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2014-01-01&endtime=2015-01-02",
        function(data){
        $.each(data.features, function(key, val) {
                var coord = val.geometry.coordinates;
                location = {
                    lat: coord[0],
                    lng: coord[1]
                };
                 titleName = val.properties.title;
            });        
          }
       });
       console.log(location);
       console.log(titleName);
      });
     });

使用Jquery AJAX

2 个答案: