無法理解阿賈克斯調用

基本上我想要做的就是從RSS提要中抓取5個圖像並在之後顯示它們。不幸的是，RSS項目沒有圖像鏈接，因此我所做的是從RSS源中獲取文章URL，然後使用YQL掃描文章以查看是否存在圖像。這些文章可能有也可能沒有圖像，並且可能有10篇或更多文章，所以我必須有一個計數器來確定何時獲得5張圖像。這就是我遇到問題的地方，我無法弄清楚如何更新ajax調用成功部分的計數器（我也嘗試過使用數組，但它不起作用）。無法理解阿賈克斯調用

我已經看過其他的例子，自從昨天以來我一直在嘗試這樣做，但我沒有運氣。也許還有其他更簡單的方法來做到這一點，但我不知道。任何幫助將不勝感激。

請參閱下面的代碼。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>La Retama</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script> 
    $(document).bind('mobileinit',function(){ 
    $.mobile.changePage.defaults.changeHash = false; 
    $.mobile.hashListeningEnabled = false; 
    $.mobile.pushStateEnabled = false; 
    }); 
    </script> 
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
    <link rel="stylesheet" href="./my_style.css"> 
</head> 

<body> 
    <div id="home" data-role="page" > 
     <div id="my_header" data-role="header"> 
      <h1>Insert Page Title Here</h1> 
     </div> 

     <div data-role="main" class="ui-content"> 

     </div> 

     <div id="my_footer" data-role="footer" data-position="fixed"> 
      <h1>Insert Footer Text Here</h1> 
     </div> 
    </div> 
</body> 

<script> 
    var pagina7Arr = []; 
    var pagina7SSPArr = []; 

    /*Getting the RSS feed*/ 
    $.ajax({ 
     url: 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent('http://web.paginasiete.bo/rss/feed.html?r=77'), 
     dataType : 'jsonp', 
     success : function (data) { 

      var myObject = data.responseData.feed.entries; 
      var how_many = 0; 

      for (var i=0; i < myObject.length;i++){ 

       var article_url = myObject[i].link;    
       var YQL_link = checkPagina7URL(article_url)  
       var YQL = "https://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20data.html.cssselect%20WHERE%20url%3D'"+YQL_link+"'%20AND%20(css%3D'.fotoNota-ext%20'%20OR%20css%3D'.fotoNota')&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys"; 
       pagina7Arr.push(YQL) 
      } 

      pageImages(pagina7Arr) 

     } 
    }); 

    /* Here is where I want to store the 5 images */ 
    function pageImages(input){ 

     var module = 0; 
     var testarr=[]; 
     for (var i=0; i<input.length; i++){ 

      $.ajax({ 
       url: input[i], 
       dataType : 'jsonp', 
       success : function (data) { 

/*I would like to update a counter here or insert images to an array I can use later on*/ 
        try{ 
         testarr.push(data.query.results.results[0].div.img.src); 
        }catch(err){ 
         try{ 
          testarr.push(data.query.results.results[1].div.img.src); 
         }catch(err){ 

         } 
        } 
       } 
      }); 

      console.log("array: "+testarr.length) 
     } 

    } 

    /*Formatting the page URL to insert into YQL call*/ 

    function checkPagina7URL (data){ 
     data = data.substr(data.indexOf('.bo')+4,data.length); 
     var section = data.substr(0, data.indexOf('/')); 
     data = data.substr(data.indexOf('/')+1,data.length) 

     var year = data.substr(0,data.indexOf('/')) 
     data = data.substr(data.indexOf('/')+1,data.length); 

     var month = data.substr(0,2); 

     if(month.indexOf('/') != -1){ 
      month = data.substr(0,1); 
     }else{ 
      month = data.substr(0,2); 
     } 
     data = data.substr(data.indexOf('/')+1,data.length); 

     var day = data.substr(0,2); 
     if(day.indexOf('/') != -1){ 
      day = data.substr(0,1); 
     }else{ 
      day = data.substr(0,2); 
     } 
     data = data.substr(data.indexOf('/')+1,data.length); 

     var page_link = data.substr(data.indexOf('/')+1,data.length); 
     var result = "http%3A%2F%2Fwww.paginasiete.bo%2F"+section+"%2F"+year+"%2F"+month+"%2F"+day+"%2F"+page_link; 

     return result; 
    } 
</script> 

</html>

來源

2016-03-25 Terp4Life

當您創建$ .ajax（{}）調用時，成功被異步調用。所以當你打電話給這條線時： console.log（「array：」+ testarr.length）

現在判斷圖像還爲時過早，所以這裏發生的是你打電話給所有的頁面，爲所有人提取圖像。你當然可以這樣做，但是當你的計數器> = 5時，你必須停止調用testarr.push。（計數器檢查應該在您進行這種推送呼叫之前）

更有效的方法是隻提取您需要的數據（雖然由於syncronousity會更慢），並且僅通過後續的url調用在先前呼叫的成功功能之內。以上應該很容易做到。

你也可以做更花哨的工作（儘管代碼更復雜），混合操作，獲取5個urls異步，然後看到成功回調，如果你有5個圖像停止，如果沒有，使（5計數器）異步請求剩餘的網頁網址。

來源

2016-03-25 22:56:54 albattran

同步AJAX已棄用，不建議使用。 – Barmar

謝謝Barmar，我不知道。我試圖簡化它，而不是從異步結果進行異步調用，但我想它必須這樣做。我相應地編輯了我的答案 – albattran

@albattran感謝您的快速響應。如果沒有太大的麻煩，請給我一個例子嗎？我試着做你告訴我的，但我仍然無法做到這一點。 – Terp4Life

無法理解阿賈克斯調用

回答

相關問題