jQuery AJAX請求在頁面加載時不起作用，但它可以在調試控制檯中工作

關閉jQuery中的異步請求解決了問題。jQuery AJAX請求在頁面加載時不起作用，但它可以在調試控制檯中工作

我在我的網頁（使用jQuery）以下JavaScript & AJAX請求：

"use strict"; 

    var hsArea, counter, hotspots, count; 
    counter = 4; 
    count = 0; 
    hotspots = {}; 

    function fetchHotspotList() { 
     $.getJSON ('/alpha/engine/hotspots/gethotspot.php', {'type' : 'list'}, function(json) { 
      hotspots = json; 
     }); 
    } 

    function displayHotspot(type, id, number) { 
     $.ajax({ 
      url: '/alpha/engine/hotspots/gethotspot.php', 
      dataType: 'json', 
      data: {'type' : type, 'id' : id}, 
      success: function(json) { 
       console.log(json); 
       var hotspot, extract; 
        extract = json.content; 
        extract = extract.replace(/<(?:.|\n)*?>/gm, ''); 
        extract = extract.substring(0, 97); 
        extract = extract + "..."; 
        json.content = extract; 

        hotspot = document.createElement("div"); 
        hsArea.append(hotspot); 
        hotspot.setAttribute('class','hotspot'); 
        hotspot.setAttribute('id','hotspot' + number); 

        $(hotspot).css('position', 'absolute'); 
        $(hotspot).css('top', number * 100 + 100); 
        $(hotspot).css('left', number * 100 + 110); 

        hotspot.innerHTML = "<h1>"+ json.title + "</h1><p>" + json.content + "</p>"; 
      }, 
      error: function(XMLHttpRequest, textStatus, errorThrown) { 
       alert(textStatus, errorThrown); 
      } 
     }); 
     } 

     function listHotspots() { 
      for(count = 0; count < counter; count++) { 
       (function(count) { 
        displayHotspot('scribble',hotspots[count], count); 
        count = count + 1; 
       })(count); 
      } 
     } 

     function loadHotspots() { 
      fetchHotspotList(); 
      listHotspots(); 
     } 

    $(document).ready(function() { 
     hsArea = $("#hotspotArea"); 
     fetchHotspotList(); 
     listHotspots(); 
    });

（對不起！格式化是有點過了） - 現在，$（文件）。就緒（）功能分配hsArea變量，因爲它應該，但是，fetchHotspotList（）和listHotspots（）的組合返回：

Uncaught TypeError: Cannot call method 'replace' of null

但是，如果谷歌瀏覽器的Javascript控制檯，我跑：

loadHotspots();

它將從AJAX請求的數據，並正確地顯示在頁面上。起初我以爲問題是我沒有使用$（document）.ready（）處理程序，但添加它並沒有解決它。在body標籤內部都沒有使用onload處理程序。

任何幫助將不勝感激。

Regards， Ben。

來源

2012-09-29 BnMcG

只是爲了澄清，這是所有包裝在標籤！ – BnMcG

您正在'extract'上調用'replace'，並從'json.content'獲取'extract'。如果返回的'json'數據存在索引'content' – air4x

這可能是由於您的listHotSpots函數在fetchHotSpots返回之前調用（因爲它是異步調用）。

你最好鏈的listHotSpots執行到的fetchHotSpots完成，像這樣：

function fetchHotspotList() { 
    $.getJSON ('/alpha/engine/hotspots/gethotspot.php', {'type' : 'list'}, function(json) { 
     hotspots = json; 
     listHotSpots(); 
    }); 
}

你可能會更好修改listHotSpots採取JSON數據從你的AJAX調用返回。希望這可以幫助！

來源

2012-09-29 10:47:48

感謝您的幫助David，但是，我已經完全關閉了異步調用，這解決了問題，但是我也會嘗試您的方法！編輯 - 剛測試過：這種方法也可以！ – BnMcG

jQuery AJAX請求在頁面加載時不起作用，但它可以在調試控制檯中工作

回答

相關問題