Question

我正在尝试从数据库中获取一些信息并使用它们制作图表。不幸的是，我用来存储这些值的变量正在POST之外丢失数据。 completed和ongoing在POST方法中分配，也是彼此的帖子方法，但不在其中。执行data2时，变量再次变为为空。我该如何解决这个问题？

var completed;
var ongoing;

$.post(
    "/api/EducationCompletionRates?status=1&startDate=20150701&endDate=20150705",
    { data: {} },
    function (data) {
        completed = data;
    }
);

$.post(
    "/api/EducationCompletionRates?status=2&startDate=20150701&endDate=20150705",
    { data: {} },
    function (data) {
        ongoing = data;
    }
);

var data2 = [
    {
         value: completed,
         color: "#46BFBD",
         highlight: "#5AD3D1",
         label: "Completed"
    },
    {
         value: 700, //ongoing,
         color: "#FDB45C",
         highlight: "#FFC870",
         label: "Ongoing"
    }
]

Answer 1

这是由于AJAX请求是异步的，而不是由于变量范围。有关该问题的完整说明，请参阅this question中的答案。要解决特定情况下的问题，可以在两个AJAX调用完成后使用$.when calback创建data2对象。试试这个：

var completed;
var ongoing;
var requests = [];

requests.push($.post(
    "/api/EducationCompletionRates?status=1&startDate=20150701&endDate=20150705",
    { data: {} },
    function (data) {
        completed = data;
    }
));

requests.push($.post(
    "/api/EducationCompletionRates?status=2&startDate=20150701&endDate=20150705",
    { data: {} },
    function (data) {
        ongoing = data;
    }
));

$.when.apply(this, requests).done(function() {
    var data2 = [{
         value: completed,
         color: "#46BFBD",
         highlight: "#5AD3D1",
         label: "Completed"
    },
    {
         value: ongoing,
         color: "#FDB45C",
         highlight: "#FFC870",
         label: "Ongoing"
    }];

    // add further logic which relies on data2 here...
});

请注意，这种方法比嵌套AJAX调用更快，因为它们将并行运行，而不是在链中运行。因此，只要最慢的请求，用户就会等待。

Answer 2

$.post()是一个AJAX调用，它应该是异步的，所以你的POST调用对数组创建行没有任何影响，因为它是在AJAX完成之前执行的。

var data2 = [];

$.post(
    "/api/EducationCompletionRates?status=1&startDate=20150701&endDate=20150705",
    { data: {} },
    function (data) {
        data2[0] = {
            value: completed,
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "Completed"
        }
    }
);

$.post(
    "/api/EducationCompletionRates?status=2&startDate=20150701&endDate=20150705",
    { data: {} },
    function (data) {
        data2[1] = {
            value: 700, //ongoing,
            color: "#FDB45C",
            highlight: "#FFC870",
            label: "Ongoing"
        }
    }
);

或者你只能进行一次ajax调用，因为第二次调用会始终产生相同的输出。

Answer 3

这解决了问题：

之前ajax将data2定义为数组

在第一个函数内部执行

function (data) {
    data2.push({
         value: data,
         color: "#46BFBD",
         highlight: "#5AD3D1",
         label: "Completed"
    });
}

这是第二次

function (data) {
    data2.push({
         value: data,
         color: "#FDB45C",
         highlight: "#FFC870",
         label: "Ongoing"
    });
}

jQuery post方法中的变量范围问题

3 个答案: