jQuery中的ajax方法接受返回值

在家业余时间用了Highcharts来做一个数据可视化的小示例，在从后端(PHP)返回的json数据后在页面里无法显示。

刚开始我的代码是这样写的

function getSeries(currMonth = 5) {
    $.ajax({
        url: 'api.php',
        data: {'month': currMonth, 'callback': 'series'},
        dataType: "json",
        success: function(data) {
            return data;
        }
    })
}

然后调用getSeries这个函数后发现没有接收到返回值，打印结果为undefined于是百撕不得骑姐，搜索到了https://q.cnblogs.com/q/65549/这篇文章后恍然大悟。学到了2点。

1. 函数作用域
2. 异步请求

所以上面的success回调函数中return上层作用域是拿不到返回值的。而且默认是异步请求，所以返回值也没有意义。如果要拿到返回值我改成了下面的这样

function getSeries(currMonth = 5) {
    var seriesData; //声明一个返回值变量
    $.ajax({
        url: 'api.php',
        async: false, //默认为true，这里改成false，同步请求
        data: {'month': currMonth, 'callback': 'series'},
        dataType: "json",
        success: function(data) {
            seriesData = data;
        }
    })
    return seriesData;
}

也可以用done这个回调函数

function getSeries(currMonth = 5) {
    var seriesData;
    $.ajax({
        url: 'api.php',
        async: false,
        data: {'month': currMonth, 'callback': 'series'},
        dataType: "json",
        done: function(data) {
            seriesData = data;
        }
    })
    return seriesData;
}
OR
function getSeries(currMonth = 5) {
    var seriesData;
    $.ajax({
        url: 'api.php',
        async: false,
        data: {'month': currMonth, 'callback': 'series'},
        dataType: "json"
    }).done(function(data){
          seriesData = data;
    })
    return seriesData;
}

这样就可以了。

还遇到一个坑就是数据库存的是int类型数值，但是PHP使用PDO取出来以后就变成了string类型的数值。所以导致图表数据渲染不出来。于是在PDO连接时加了2个属性

PDO::ATTR_STRINGIFY_FETCHES => false, //提取的时候将数值转换为字符串
PDO::ATTR_EMULATE_PREPARES => false, //启用或禁用预处理语句的模拟

https://q.cnblogs.com/q/65549/