使用 Ajax 调用将数组传递给 Javascript 代码

Question

我正在使用日期选择器，我想在单击 MySQL 数据库时查询它以使某些日期不可用。如何将此数组传递到我的 JavaScript 代码中，其中显示“AJAX CALL CODE NEEDS TO GO HERE”？

这是我的 Javascript 日期选择器代码

$(function() {

  $('input[name="start_date"]').daterangepicker({
      autoUpdateInput: false,
      locale: {
          cancelLabel: 'Clear'
      },
      isInvalidDate: function(date) {
      var dateRanges = [
AJAX CALL CODE NEEDS TO GO HERE
            ];
            return dateRanges.reduce(function(bool, range) {
                return bool || (date >= range.start && date <= range.end);
            }, false);
        }
  });

  $('input[name="start_date"]').on('apply.daterangepicker', function(ev, picker) {
      document.getElementById("start_date").value = picker.startDate.format('MM/DD/YYYY');
      document.getElementById("end_date").value = picker.endDate.format('MM/DD/YYYY');

  });

  $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
      $(this).val('');
  });

});

以下是需要插入到 PHP 文件中的代码中以进行 ajax 调用的代码：

<?php
include 'dbconfig.php';

$sql="SELECT start_date, end_date FROM date_ranges ";
$result = mysqli_query($conn,$sql);

while($row = mysqli_fetch_array($result)) {

echo  "{ 'start': moment('" . $row['start_date'] . "'), 'end': moment('" . $row['end_date'] . "') },";
mysqli_close($conn);
} 
?>

编辑：在 Emiel Zuurbier 的帮助下编写新代码

$(function() {

var dateRanges = null;

$.ajax({
    url: 'getdaterangepicker.php', 
    method: 'GET',
    dataType: 'json',
    success: function(response) {  
        if (response) {            
            dateRanges = $.parseJSON(response); 
        }
    }
});

  $('input[name="start_date"]').daterangepicker({
      autoUpdateInput: false,
      locale: {
          cancelLabel: 'Clear'
      },
      isInvalidDate: function(date) {
            return dateRanges.reduce(function(bool, range) {
                return bool || (date >= range.start && date <= range.end);
            }, false);
        }
  });

  $('input[name="start_date"]').on('apply.daterangepicker', function(ev, picker) {
      document.getElementById("start_date").value = picker.startDate.format('MM/DD/YYYY');
      document.getElementById("end_date").value = picker.endDate.format('MM/DD/YYYY');

  });

  $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
      $(this).val('');
  });

});

返回错误“TypeError: null is not an object (evalating 'dateRanges.reduce')”

Answer 1

由于您使用的是 jQuery，我们将使用 jQuery 的 $.ajax 函数。

在您的 PHP 文件中，将 while 循环的内容更改为以下代码。它将创建一个associative array 来存储start 和end 值，没有moment，因为那是JavaScript，并将数组作为JSON 发送。因为它是一个关联数组，所以它会变成一个我们可以在 JavaScript 中使用的对象。

// Create empty array.
$date_ranges = array();

// Add every row to array;
while($row = mysqli_fetch_array($result)) {

    // Create an associative array to store the values in.
    // This will later be a JavaScript Object.
    array_push($date_ranges, array(
        'start'   => $row['start_date'],
        'end'     => $row['end_date']
    ));

    mysqli_close($conn);

} 

// Send the $date_ranges as JSON.
$json = json_encode($date_ranges); // '[{"start": "2019-08-18", "end": "2019-08-19"}]'
echo $json;

在 JavaScript 中准备存储 dateRanges。在 AJAX 调用之前创建一个变量来保存结果。

现在您可以发出 AJAX 请求了。这必须发送到您定义逻辑以获得结果的 PHP 文件。我们想从服务器获取一些东西，所以使用GET 方法。指示 AJAX 请求期待 JSON 并相应地处理它。将dataType 设置为'json'。

当请求发送时，对您的响应做一些事情。这可以通过将success 属性设置为函数来完成。该函数将接收响应并打开它供我们使用。将响应从 JSON 解码为 JavaScript，瞧，你就有了结果。

编辑：将 AJAX 调用放入包装函数中。这样，您可以在认为有必要时多次使用此功能。它还创建了一种触发callback function 的方法，我们可以从中访问我们的数据。

// AJAX request wrapper function.
// Call this function to get the dates from the server.
function getDateRanges(callback) {
    $.ajax({
        url: '/yourphpfile.php',       // Change this to the uri of your file
        method: 'GET',                 // Use the GET method
        dataType: 'json',              // Expect a JSON response
        success: function(response) {  // What will happen when the request succeeds
            if (response) {            // Check if there is a response
                callback(response);    // Pass the response into the callback
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus + ': ' + errorThrown);
        }
    });
}

所以现在您可以随时调用服务器。

在调用daterangepicker 函数之前，您需要您的日期。在编辑之前，代码将调用 AJAX 函数，但在返回任何值之前，因为它可能需要一秒钟，所以 daterangepicker 已经被调用并在它有时间更新 null 之前使用了 null 值价值。

这是因为 AJAX 中的 A，它代表 Asynchronous。这意味着当$.ajax 函数被触发时，它不会等待它完成，而是继续执行脚本的其余部分。每当$.ajax 函数给出响应时，success 函数就会被触发。但我们并没有等待它完成。所以我们会调整它。

将设置datepicker 的代码放入现在创建的getDateRanges 函数的回调中。这会导致daterangepicker 等到 AJAX 调用完成并获得值。

见下面的代码：

// Get the dates from the server.
// Fire the callback function when the AJAX call has returned a value.
// And use it as the dates variable.
getDateRanges(function(dates) {

    $('input[name="start_date"]').daterangepicker({
        autoUpdateInput: false,
        locale: {
            cancelLabel: 'Clear'
        },
        isInvalidDate: function(date) {
            // Here use your dates that you've got from the server.
            var dateRanges = dates;
            return dateRanges.reduce(function(bool, range) {
                return bool || (date >= moment(range.start) && date <= moment(range.end));
            }, false);
        }
    });

    $('input[name="start_date"]').on('apply.daterangepicker', function(ev, picker) {
        document.getElementById("start_date").value = picker.startDate.format('MM/DD/YYYY');
        document.getElementById("end_date").value = picker.endDate.format('MM/DD/YYYY');
    });

    $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
        $(this).val('');
    });

});

更多关于如何使用jQuery的ajax功能，请查看these docs。

现在start 和end 值仍然是字符串。我确实看到您在 PHP 中使用了moment，但是由于我们从 PHP 中删除了它，您必须在您的 JS 中调用它们。
你可以在你的 reduce 函数中做到这一点：

return bool || (date >= moment(range.start) && date <= moment(range.end));

希望对你有帮助！