如何将 ajax 响应转换为 javascript datepicker 函数？答案

【问题标题】：How to get an ajax response into a javascsript datepicker function?如何将 ajax 响应转换为 javascript datepicker 函数？
【发布时间】：2016-03-06 10:27:26
【问题描述】：

我正在尝试将 ajax 响应放入我的 datepicker 函数中。

我的 getdates.php 脚本查询一个 mysql 数据库，然后回显一系列我希望 datepicker 禁用的日期。它以这种格式呼应它们： ["3-14-2016"] 带有括号和所有。

我认为 ajax 响应将进入 disableddates 变量，但它并没有像预期的那样禁用该日期。

任何想法都非常感谢。

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>

<script>
//ajax call to getdates.php, gets all dates that are full (3 or more books on one day) for that particular category
function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                //document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
    console.log(xmlhttp.responseText);
    disableddates = xmlhttp.responseText;


    $("#datepicker").datepicker({
      beforeShowDay: DisableSpecificDates,
      minDate: 1, //disable today or earlier
      maxDate: 63 //show up to 63 days
    });

            }
        };
        xmlhttp.open("GET","getdates.php?q="+str,true);
        xmlhttp.send();
    }
}
</script>

<script>
//var disableddates = ["3-14-2016"];//hardcoded like this and it works. this date is disabled.  but the same string coming from getdates.php doesn't work. ??
function DisableSpecificDates(date) {
 var m = date.getMonth();
 var d = date.getDate();
 var y = date.getFullYear();
 // First convert the date in to the mm-dd-yyyy format.  note: Jan=0, so add 1 to m! 
 var currentdate = (m + 1) + '-' + d + '-' + y ;
 // check if the date belongs to disableddates array 
 for (var i = 0; i < disableddates.length; i++) {
 // check if the current date is in disabled dates array. 
 if ($.inArray(currentdate, disableddates) != -1 ) {
  return [false,"notFreeDay"];//set css classes so can style dates
  }
  else { return [true,"freeDay"];
  }
 }
}
</script>

</head>
<body>
<form>
<select id='categories' onchange="showUser(this.value)" name="category[]">
<option value="">---</option>
<option value="1">cat1</option>
<option value="2">cat2</option>
<option value="3">cat3</option>
<option value="4">cat4</option>
</select>
</form>

<!--dates to be disabled in datepicker, from ajax mysql query at getdates.php, goes into this div-->
<div id="txtHint"></div>

<input id="datepicker" type="text">

</body>
</html>

【问题讨论】：

标签： php jquery mysql ajax jquery-ui-datepicker

【解决方案1】：

当 ajax 请求完全完成时初始化日期选择器。

xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    //document.getElementById("txtHint").innerHTML = xmlhttp.responseText;

    console.log(xmlhttp.responseText);
    disableddates = JSON.parse(xmlhttp.responseText);

    $("#datepicker").datepicker({
      beforeShowDay: DisableSpecificDates,
      minDate: 1, //disable today or earlier
      maxDate: 63 //show up to 63 days,
      dateFormat: 'mm-dd-yyyy'
    });

  }
};

这里不需要for循环；

    function DisableSpecificDates(date) {
        var m = date.getMonth();
        var d = date.getDate();
        var y = date.getFullYear();
        var currentdate = (m + 1) + '-' + d + '-' + y;

        if ($.inArray(currentdate, disableddates) != -1) {
            return [false, "notFreeDay"];
        }
        else {
            return [true, "freeDay"];
        }
    }

【讨论】：

你让我更接近了，但我仍然无法让它工作。靠近底部的 $.inArray(currentdate, disableddates) != -1 位应该返回 false 并触发禁用日期，但没有爱。我用你的建议更新了上面的脚本。
我们应该将结果解析为 JSON：disableddates = JSON.parse(xmlhttp.responseText);
并在脚本块顶部添加var disableddates; 以全局定义它。