合併所有結果並立即顯示 - AJAX

目前，我按順序顯示一些數據，但我正在尋找一種方法來一次顯示所有結果。我知道jQuery有一個「完成（）」和「當（）」方法，但我沒有成功實施它們，所以我不得不去與下面顯示的。合併所有結果並立即顯示 - AJAX

這裏是我的代碼：

(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>

我開到的最佳做法或最佳的設計方面對代碼進行任何其他反饋。

來源

2016-11-09 UrbanCohort

如果我理解你的權利。使用不同的響應參數名稱，比如'success：function（res1）'和'success：function（res2）'，然後用'res1'，'res2'調用內部成功回調函數中的所有函數。 –

你有什麼錯誤？ – madalinivascu

目前，我按照順序顯示一些數據，但我正在尋找一種可以一次顯示所有結果的方法。

您需要使用2個不同的響應參數名2個Ajax請求喜歡success: function(res1)和success: function(res2)並調用內部成功回調裏面所有的功能。

(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));

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

來源

2016-11-09 05:15:00

合併所有結果並立即顯示 - AJAX

回答

相關問題