使用 AJAX 更新从数据库检索的数据（mysql）

Question

我想使用“日期选择器”从数据库中获取数据以选择数据的日期范围，问题是我的数据没有保存在 var datapoints 上，但 console.log(result) 显示数据很好，我的代码是这样的：

test.js

jQuery.extend({
dataRange: function(start, end) {
        $.ajax({    
            type: "POST",
            url: "some.php",             
            dataType: "json",  
            data: {date1: start, date2: end},
            success: function(data){                    
                var result = JSON.stringify(data);
                console.log(result); //shows the data well
                return result;
            }
        });

    }
});
//initial data
var start = moment().format('YYYY-MM-DD'); 
var end = moment().subtract(7, 'days').format('YYYY-MM-DD');
var datapointsP;
$.dataRange(start, end)
  .done(function(data) { //get error here
datapointsP = JSON.parse(data);
console.log(datapointsP); // this should print the necessary data
})
.fail(function(xhr) {
 console.log('error', xhr);
});

然后在 some.php 上

$start = $_POST['date1'];
$end = $_POST['date2'];
$query =  "select * from table where date between '" . $end . "' and '" . $start . "'";
$stmt = $pdo->prepare($query);
$stmt->execute();
$data = array();
for ($i = 0; $i < 24; $i++){
    $data[] = 0;
}

while($row = $stmt->fetch()){
     $data[$row['horas']] = ((int)$row['pot']);
}
$post_data = json_encode($data);
echo $post_data;
}

PD：由于这个问题，我仍然无法添加日期选择器。 提前致谢

Answer 1

$.ajax 执行异步 HTTP (Ajax) request。这意味着$.ajax不在同一个Javascript线程中执行。

因此，dataRange 函数被执行并将$.ajax call 传递给您的浏览器。然后它转到下一条语句并返回结果。现在，由于未声明结果，它会抛出 Uncaught ReferenceError。

即使您从success 处理程序返回结果，变量datapoints 也将是undefined，因为数据范围的执行已经完成并返回undefined。

要解决这个问题，您需要使用promise。 $.ajax 返回一个承诺，可用于检索从请求返回的数据。查看此link 以了解有关 promise 和 $.ajax 的更多信息。

jQuery.extend({
dataRange: function(start, end) {
        return $.ajax({    
            type: "POST",
            url: "some.php",             
            dataType: "json",  
            data: {date1: start, date2: end},
            success: function(data){                    
                var result = JSON.stringify(data);
                console.log(result); //shows the data well
                return result;
            }
        });
    }
});
//initial data
var start = moment().format('YYYY-MM-DD'); 
var end = moment().subtract(7, 'days').format('YYYY-MM-DD');
var datapoints;
$.dataRange(start, end)
  .done(function(data) {
    datapoints = JSON.parse(data);
    console.log(datapoints); // this should print the necessary data
  })
  .fail(function(xhr) {
    console.log('error', xhr);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

您以错误的方式从 dataRange 返回结果，您应该在 ajax success 下返回结果

 jQuery.extend({
 dataRange: function(start, end) {
        $.ajax({    
            type: "POST",
            url: "some.php",             
            dataType: "json",  
            data: {date1: start, date2: end},
            success: function(data){                    
                var result = JSON.stringify(data);
                console.log(result); //shows the data well
                return result; 
            }
        });

    }
});