如何使用OOP完成異步ajax請求返回值？

我希望對象'airported'返回一個機場列表，但目前我無法在每個循環完成後返回數據，它是在list.html中找到'li'的迭代ajax）

機場對象正在使用Airport類的實例化。我不想在我的應用程序的任何其他地方使用複雜的代碼。我只想打電話給'airport.list（）'並獲得機場列表。

list.html僅供參考。你不必研究它。此外，我必須使用它，我不能有一個漂亮的JSON或類似的東西。

的Javascript

function Airport() { 

     this.list = function() { 

      var airportList = [] 

      var promise = this.data(); 

      promise.success(function(data){ 

       var list = data; 

       var listSize = $(data).find('li').size(); 

       $.each($(list).find("li"), function(key,val) { 

        airportList.push(val); 

        if(listSize == key+1) { 

         console.log(airportList); 

         return false; 

        } 

       }); 

      }) 

      return airportList; 

     }; 

     this.data = function() { 

      return $.ajax({ 
       url: "/list.html" 
      }) 

     }; 

    } 

    var airported = new Airport(); 

    console.log('airported', airported.list());

list.html

<html> 
<head></head> 
<body> 
<div id="listautocomp" style="background:white"> 
    <ul id="ulSuggest"> 
     <li style="padding:0px;"> 
      <div id="WAS|0|0***&lt;b&gt;WAS&lt;/b&gt; - &lt;b&gt;Was&lt;/b&gt;hington All Airports, District of Columbia, United States" 
       onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon" 
                            style="visibility:hidden;;"></span><b>WAS</b> 
       - <b>Was</b>hington All Airports, District of Columbia, United States 
      </div> 
     </li> 
     <li style="padding:0px;"> 
      <div id="SEA|1|0***SEA - Seattle/Tacoma, &lt;b&gt;Was&lt;/b&gt;hington, United States" 
       onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon" 
                            style="visibility:visible;;"></span>SEA 
       - Seattle/Tacoma, <b>Was</b>hington, United States 
      </div> 
     </li> 
     <li style="padding:0px;"> 
      <div id="SEA|0|0***SEA - Seattle All Airports, &lt;b&gt;Was&lt;/b&gt;hington, United States" 
       onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon" 
                            style="visibility:hidden;;"></span>SEA 
       - Seattle All Airports, <b>Was</b>hington, United States 
      </div> 
     </li> 
     <li style="padding:0px;"> 
      <div id="IAD|1|0***IAD - &lt;b&gt;Was&lt;/b&gt;hington Dulles, District of Columbia, United States" 
       onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon" 
                            style="visibility:visible;;"></span>IAD 
       - <b>Was</b>hington Dulles, District of Columbia, United States 
      </div> 
     </li> 
     <li style="padding:0px;"> 
      <div id="DCA|1|0***DCA - &lt;b&gt;Was&lt;/b&gt;hington National, District of Columbia, United States" 
       onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon" 
                            style="visibility:visible;;"></span>DCA 
       - <b>Was</b>hington National, District of Columbia, United States 
      </div> 
     </li> 
     <li style="padding:0px;"> 
      <div id="GEG|1|0***GEG - Spokane, &lt;b&gt;Was&lt;/b&gt;hington, United States" 
       onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon" 
                            style="visibility:visible;;"></span>GEG 
       - Spokane, <b>Was</b>hington, United States 
      </div> 
     </li> 
     <li style="padding:0px;"> 
      <div id="GEG|0|0***GEG - Spokane All Airports, &lt;b&gt;Was&lt;/b&gt;hington, United States" 
       onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon" 
                            style="visibility:hidden;;"></span>GEG 
       - Spokane All Airports, <b>Was</b>hington, United States 
      </div> 
     </li> 
     <li style="padding:0px;"> 
      <div id="PSC|1|0***PSC - Pasco, &lt;b&gt;Was&lt;/b&gt;hington, United States" 
       onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon" 
                            style="visibility:visible;;"></span>PSC 
       - Pasco, <b>Was</b>hington, United States 
      </div> 
     </li> 
     <li style="padding:0px;"> 
      <div id="BLI|1|0***BLI - Bellingham, &lt;b&gt;Was&lt;/b&gt;hington, United States" 
       onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon" 
                            style="visibility:visible;;"></span>BLI 
       - Bellingham, <b>Was</b>hington, United States 
      </div> 
     </li> 
     <li style="padding:0px;"> 
      <div id="YKM|1|0***YKM - Yakima Air Terminal, &lt;b&gt;Was&lt;/b&gt;hington, United States" 
       onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon" 
                            style="visibility:visible;;"></span>YKM 
       - Yakima Air Terminal, <b>Was</b>hington, United States 
      </div> 
     </li> 
     <li style="padding:0px;"> 
      <div id="YKM|0|0***YKM - Yakima All Airports, &lt;b&gt;Was&lt;/b&gt;hington, United States" 
       onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon" 
                            style="visibility:hidden;;"></span>YKM 
       - Yakima All Airports, <b>Was</b>hington, United States 
      </div> 
     </li> 
     <li style="padding:0px;"> 
      <div id="LKE|0|0***LKE - Seattle LKE Union, &lt;b&gt;Was&lt;/b&gt;hington, United States" 
       onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon" 
                            style="visibility:hidden;;"></span>LKE 
       - Seattle LKE Union, <b>Was</b>hington, United States 
      </div> 
     </li> 
     <li style="padding:0px;"> 
      <div id="EAT|1|0***EAT - Wenatchee, &lt;b&gt;Was&lt;/b&gt;hington, United States" 
       onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon" 
                            style="visibility:visible;;"></span>EAT 
       - Wenatchee, <b>Was</b>hington, United States 
      </div> 
     </li> 
     <li style="padding:0px;"> 
      <div id="PUW|1|0***PUW - Pullman, &lt;b&gt;Was&lt;/b&gt;hington, United States" 
       onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon" 
                            style="visibility:visible;;"></span>PUW 
       - Pullman, <b>Was</b>hington, United States 
      </div> 
     </li> 
     <li style="padding:0px;"> 
      <div id="ALW|1|0***ALW - Walla Walla, &lt;b&gt;Was&lt;/b&gt;hington, United States" 
       onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon" 
                            style="visibility:visible;;"></span>ALW 
       - Walla Walla, <b>Was</b>hington, United States 
      </div> 
     </li> 
     <li style="padding:0px;"> 
      <div id="MWH|1|0***MWH - Moses Lake, &lt;b&gt;Was&lt;/b&gt;hington, United States" 
       onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon" 
                            style="visibility:visible;;"></span>MWH 
       - Moses Lake, <b>Was</b>hington, United States 
      </div> 
     </li> 
     <li style="padding:0px;"> 
      <div id="MWH|0|0***MWH - Moses Lake All Airports, &lt;b&gt;Was&lt;/b&gt;hington, United States" 
       onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon" 
                            style="visibility:hidden;;"></span>MWH 
       - Moses Lake All Airports, <b>Was</b>hington, United States 
      </div> 
     </li> 
     <li style="padding:0px;"> 
      <div id="CLM|1|0***CLM - Port Angeles, &lt;b&gt;Was&lt;/b&gt;hington, United States" 
       onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon" 
                            style="visibility:visible;;"></span>CLM 
       - Port Angeles, <b>Was</b>hington, United States 
      </div> 
     </li> 
     <li style="padding:0px;"> 
      <div id="OLM|1|0***OLM - Olympia, &lt;b&gt;Was&lt;/b&gt;hington, United States" 
       onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon" 
                            style="visibility:visible;;"></span>OLM 
       - Olympia, <b>Was</b>hington, United States 
      </div> 
     </li> 
     <li style="padding:0px;"> 
      <div id="PAE|1|0***PAE - Everett, &lt;b&gt;Was&lt;/b&gt;hington, United States" 
       onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon" 
                            style="visibility:visible;;"></span>PAE 
       - Everett, <b>Was</b>hington, United States 
      </div> 
     </li> 
    </ul> 
</div> 
</body> 
</html>

來源

2013-08-27 CarbonDry

你想要一個機場的文本列表？在JSON中？在HTML中？你想要什麼格式？ –

我想返回airportList數組，它是響應中找到的'li'元素的數組。它的文本，JSON或HTML並不重要 - 這不是問題的範圍。 – CarbonDry

只需添加，每個循環中的console.log（airportList）就能正常工作。這不是問題。我遇到的問題是試圖找出如何將它作爲類之外的對象返回。 – CarbonDry

OK了promisse將無法正常工作同步，因爲你返回之前獲取數據......你需要傳遞一個回調來接收數據。

該promisse是異步，你可以像下面這樣做。

function Airport() { 

    this.list = function(callback) { 

     var airportList = [] 

     var promise = this.data(); 

     promise.success(function(data){ 

      var list = data; 

      var listSize = $(data).find('li').size(); 

      $.each($(list).find("li"), function(key,val) { 

       airportList.push(val); 

       if(listSize == key+1) { 

        console.log(airportList); 

        return false; 

       } 

      }); 

      if(typeof callback === "function"){ 


       callback(airportList); //the return is here really, but async 

      } 

     }) 

     //return airportList; the return is empty here. 

    }; 

    this.data = function() { 

     return $.ajax({ 
      url: "/list.html" 
     }) 

    }; 

} 

var airported = new Airport(); 

airported.list(function(airportList){ 
    console.log('airported', airportList); 
});

來源

2013-08-27 21:54:17

這很好。謝謝 – CarbonDry

如何使用OOP完成異步ajax請求返回值？

回答

相關問題