结合所有结果并立即显示 - AJAX

Question

目前，我按顺序显示了一些数据，但我正在寻找一种方法来一次显示所有结果。

我知道jQuery有一个“done（）”和“when（）”方法但是我没有成功实现它们所以我不得不使用下面显示的。

这是我的代码：

(function($, window, document) {
  $('.text').text('loading . . .');
  $('.header').append("Weather App");
  var weatherURL = "http:\/\/api.wunderground.com/api/API_KEY/conditions/q/";
  var finished = "";
  $(function() {
    var getIp = $.ajax({
      type: "GET",
      url: "http://ipinfo.io/json",
      success: function(response) {
        $('.text').html('');
        weatherURL = weatherURL + response.postal + ".json";
        displayLocation(response);

        getWeather = $.ajax({
          type: "GET",
          datatype: "jsonp",
          url: weatherURL,
          success: function(response) {
            displayTemp(response);
            displayConditions(response);
            displayIcon(response);
          }
        })
      }
    });
  });

  function displayLocation(response) {
    $('.location').append(response.city + ", " + response.region + " - " + response.country);
  }

  function displayTemp(response) {
    $('.temp').append(response.current_observation.temp_f);
  }

  function displayConditions(response) {
    var obj = response.current_observation.icon;
    var word1 = "";
    var word2 = "";

    var capWord1 = "";
    var capWord2 = "";

    if (obj.indexOf("mostly")) {
      word1 = obj.substring(0, 6);
      word2 = obj.substring(6);
    } else if (obj.indexOf("partly")) {
      word1 = obj.substring(0, 6);
      word2 = obj.substring(6);
    } else {
      word1 = response.current_observation.icon;
    }

    if (word2.length > 1) {
      capWord1 = word1.charAt(0).toUpperCase() + word1.slice(1);
      capWord2 = word2.charAt(0).toUpperCase() + word2.slice(1);

      $('.conditions').append(capWord1 + " " + capWord2);
    } else {
      capWord1 = word1.charAt(0).toUpperCase() + word1.slice(1);
      $('.conditions').append(capWord1);
    }
  }

  function displayIcon(response) {
    $('.icon').append("<img src='" + response.current_observation.icon_url + "'>");
  }
}(window.jQuery, window, document));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content">
  <div class="header"></div>
  <div class="location"></div>
  <div class="temp"></div>
  <div class="conditions"></div>
  <div class="icon"></div>
</div>

我对最佳实践或最佳设计方面的代码反馈持开放态度。

Answer 1

  

目前，我按顺序显示了一些数据，但我正在寻找一个   一次显示所有结果的方法。

您需要为2个ajax请求使用2个不同的响应参数名称，例如success: function(res1)和success: function(res2)，并在内部成功回调中调用所有函数。

＆＃13;

＆＃13;

(function($, window, document) {
  $('.text').text('loading . . .');
  $('.header').append("Weather App");
  var weatherURL = "http:\/\/api.wunderground.com/api/API_KEY/conditions/q/";
  var finished = "";
  $(function() {
    var getIp = $.ajax({
      type: "GET",
      url: "http://ipinfo.io/json",
      success: function(res1) {
        //wait and don't call your function
        weatherURL = weatherURL + res1.postal + ".json";
        getWeather = $.ajax({
          type: "GET",
          datatype: "jsonp",
          url: weatherURL,
          success: function(res2) {
            //call all your functions inside here as you like
            $('.text').html('');
            //res1
            displayLocation(res1);
            //res2
            displayTemp(res2);
            displayConditions(res2);
            displayIcon(res2);
          }
        })
      }
    });
  });

  function displayLocation(response) {
    $('.location').append(response.city + ", " + response.region + " - " + response.country);
  }

  function displayTemp(response) {
    $('.temp').append(response.current_observation.temp_f);
  }

  function displayConditions(response) {
    var obj = response.current_observation.icon;
    var word1 = "";
    var word2 = "";

    var capWord1 = "";
    var capWord2 = "";

    if (obj.indexOf("mostly")) {
      word1 = obj.substring(0, 6);
      word2 = obj.substring(6);
    } else if (obj.indexOf("partly")) {
      word1 = obj.substring(0, 6);
      word2 = obj.substring(6);
    } else {
      word1 = response.current_observation.icon;
    }

    if (word2.length > 1) {
      capWord1 = word1.charAt(0).toUpperCase() + word1.slice(1);
      capWord2 = word2.charAt(0).toUpperCase() + word2.slice(1);

      $('.conditions').append(capWord1 + " " + capWord2);
    } else {
      capWord1 = word1.charAt(0).toUpperCase() + word1.slice(1);
      $('.conditions').append(capWord1);
    }
  }

  function displayIcon(response) {
    $('.icon').append("<img src='" + response.current_observation.icon_url + "'>");
  }
}(window.jQuery, window, document));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content">
  <div class="header"></div>
  <div class="location"></div>
  <div class="temp"></div>
  <div class="conditions"></div>
  <div class="icon"></div>
</div>

＆＃13;

＆＃13;

＆＃13;