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

【问题标题】：Why does this javascript/jQuery JSON parsing code not work?为什么这个 javascript/jQuery JSON 解析代码不起作用？
【发布时间】：2009-09-18 16:11:14
【问题描述】：

这是我的 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);
        }
    });
}

【问题讨论】：

标签： php javascript jquery json datepicker

【解决方案1】：

您的日期选择器代码将（可能）在 ajax 调用完成之前被执行。至少，尝试将代码的 datepicker 部分移动到 $.post 回调中：-

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");

}

编辑：顺便说一句，如果是我，我可能会将其拆分为某种调用函数以获取日期数据并为其提供回调。例如：-

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);
            }
        });
    });

【讨论】：

【解决方案2】：

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

您的 datePicker 代码需要进入 $.post 回调函数内部，在 for 循环下方，在 dates = data; 行下方

【讨论】：