javascript - Ajax异步请求问题

Question

在下面，这段代码有效，当我使用alert()框时，我按下警报框，然后，内容被加载到页面上。但是，如果我删除alert()框，那么内容就不会被加载。只是为了让您知道谁读到了这篇文章，抱歉，我已经阅读了很多有关“Ajax”请求的内容，但是，我无法理解这一点。对此有什么帮助吗？

var myPage = myPage || {};
myPage.datas = "";
myPage.Content = (function(){
$.ajax({
async: true,
    type:'GET',
    url: 'JSON/carousel-data.json',
    dataType: "json",
    success: function(data) {
       myPage.datas = myPage.dataRetive(data); 
    }
});
})(); 

myPage.dataRetive = function(dataIn){
return dataIn;
}

alert(myPage.datas); // Here is the place, if i use this alert, then, content is loading, otherwise, it is not.

myPage.globals = {
Contact: $("#Contact")[0],
About : $("#About")[0],
Careers : $("#Careers")[0],
sampMaxLimits: 20,
Images:  {
  fpn1: myPage.datas[0].image, // error comes these place
  fpn2: myPage.datas[1].image,
  fpn3: myPage.datas[2].image
}

}

Answer 1

修改您的代码如下

$.ajax({
async: true,
type:'GET',
url: 'JSON/carousel-data.json',
dataType: "json",
success: function(data) {
   myPage.datas = myPage.dataRetive(data); 
   myPage.globals = {
        Contact: $("#Contact")[0],
       About : $("#About")[0],
        Careers : $("#Careers")[0],
     sampMaxLimits: 20,
      Images:  {
        fpn1: myPage.datas[0].image, // now myPage.datas will be available
       fpn2: myPage.datas[1].image,
      fpn3: myPage.datas[2].image
   }

  }


}
});

现在它将正确更新myPage.globals