为什么这个javascript/jQuery JSON解析代码不起作用？

Question

这是我的jQuery代码。它应该解析由this php脚本返回的json。 PHP已知工作。它还应该将日期文字转换为javascript日期对象。但是，在dates.length发生错误。任何人都可以看到代码有什么问题吗？

if($("#calendar").length) 
{ 
    var dates; 
    $.post("/dates/jsondates.php",function(data) 
    { 
     for(var i=0; i<data.length; i++) 
     { 
      data[i].start = new Date(data[i].start); 
      data[i].end = new Date(data[i].end); 
     } 
     dates = data; 
    }, "json"); 

    $("#calendar").datepicker(
    { 
     beforeShowDay: function(date) 
     { 
      for(var i=0; i<dates.length; i++) 
      { 
       if(dates[i].start<date<dates[i].end) 
       { 
        return new Array(0, "booked", dates[i].comment); 
       } 
      } 
      return new Array(1); 
     } 
    }); 
} 

Answer 1

下您的日期选择代码（可能）会获取Ajax调用完成之前执行。至少，尝试代码的日期选择器部分移动到$。员额回调： -

if ($("#calendar").length) 
{ 
    var dates; 
    $.post("/dates/jsondates.php",function(data) 
    { 
     for(var i=0; i<data.length; i++) 
     { 
       data[i].start = new Date(data[i].start); 
       data[i].end = new Date(data[i].end); 
     } 
     dates = data; 

     $("#calendar").datepicker(
     { 
      beforeShowDay: function(date) 
      { 
        for(var i=0; i<dates.length; i++) 
        { 
          if(dates[i].start<date<dates[i].end) 
          { 
            return new Array(0, "booked", dates[i].comment); 
          } 
        } 
        return new Array(1); 
      } 
     }); 
    }, "json"); 

} 

编辑：顺便说一句，如果是我，我可能把它分解成某种调用者函数来获取日期数据并为其提供回调。 E.g： -

function __callDateController(callback) 
{ 
    $.post("/dates/jsondates.php",function(data) 
    { 
     for(var i=0; i<data.length; i++) 
     { 
      data[i].start = new Date(data[i].start); 
      data[i].end = new Date(data[i].end); 
     } 

     if (callback !== undefined) { 
      callback(data); 
     } 
    }, "json"); 
} 

然后给它一个回调的日期选择器来处理： -

__callDateController(function(dates) 
{ 
    $("#calendar").datepicker(
     { 
      beforeShowDay: function(date) 
      { 
       for(var i=0; i<dates.length; i++) 
       { 
        if(dates[i].start<date<dates[i].end) 
        { 
         return new Array(0, "booked", dates[i].comment); 
        } 
       } 
       return new Array(1); 
      } 
     }); 
    }); 

Answer 2

问题是您的日历日期选择器代码在AJAX完成处理之前正在执行。

您的日期选择器的代码需要去.post的$回调函数内，下方for循环，而行dates = data;