嵌套Ajax无法填充变量名以在其范围之外使用

Question

我一直在尝试将我的php代码转换为Ajax Calls，因为我希望我的页面可以在Phonegap上运行，不幸的是我对ajax的专业知识并不是很好，而且我遇到了嵌套Ajax调用的问题：

第一个ajax调用运行良好（它返回一个JSON），第二个也正常工作，但我无法保存结果以填充第一个循环。 areaname总是空的。它显示当我提醒它时，我只是无法在我的阵列推送中使用它。

我也想知道它是否是一种健康的方法，或者是否有更好的方法来转换PHP代码（至少是逻辑）。

以下是代码：

$(document).ready(function(){

$.ajax({                                      
  url: 'ajax/getcountries.php',                      
  data: "",                                                        
  dataType: 'json',                     
  success: function(requests){

    var countries = [];

    $.each(requests, function (key, value) {

      var areaname = '';

        $.ajax({                                      
                  url: 'ajax/getareas.php',                      
                  data: "areaid=" + value.area,                                                                            
                  success: function(a){
                    areaname = a;
                }
        });

        countries.push("<div>" + value.countryname + " <h4>"+ areaname +"</h4></div>");
//areaname is always empty, knowing that i get a good response if i alert "a"


    });  

   $('#countries').html(countries.join(''));
   $('#countries').enhanceWithin();
  } 
});

}）;

谢谢