javascript - 如何将 JSONP 存储到变量中？

Question

这个问题已经存在:

How to use JSONP in JavaScript? [duplicate]

已关闭 9 年前。

我在将 JSONP 数据存储到变量中时遇到问题。我需要将一个数字存储到一个变量中，以便我可以将其用作 Google 饼图的输入。例如:

我的 test.json:

{
 "name": "ProjA",
 sp": 10,
 "current": 20
}

现在我想得到SP值。

我尝试使用 JQuery:

var sp = (function () {
    var sp = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': test.json,
        'dataType': "json",
        'success': function (data) {
            json = data.sp;
        }
    });
    return json;
})();

现在我想在变量 sp 中获取数字 10。然后将 sp 放入 google 图表内:

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Finished', sp,
      ['In Progress', 1],
      ['Canceled', 1],
      ['Rejected', 2]
    ]);

这只是部分代码，重要的是，它不起作用。我认为变量的存储有问题。有人可以帮我吗？

重要:我没有网络服务器!这必须使用 JSONP 来完成，以避免跨域!

编辑:

我尝试过以下示例:

 function getData(callback) {
$.ajax({
async: false,
global: false,
url: 'test.json', // make sure that you quote your filename
dataType: 'jsonp', // this is meant to be jsonp, not json
success: function (data) {
    console.log(data);
  callback(data.sp);
}


});
}

但是，跨域似乎仍然存在问题，因为控制台中的错误指出:“XMLHttpRequest 无法加载。收到无效响应。因此不允许访问 Origin 'null'。jquery-1.11。 1.min.js:4"

仍在寻找解决方案。

Answer 1

您正在使用异步调用，因此无法使用正常返回。有几种方法可以做到这一点:

回调

function getData(callback) {
  $.ajax({
    async: false,
    global: false,
    url: 'test.json', // make sure that you quote your filename
    dataType: 'jsonp', // this is meant to be jsonp, not json
    success: function (data) {
      callback(data.sp);
    }
  });
}

getData(function (sp) {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');
  data.addRows([
    ['Finished', sp], // close your braces
    ['In Progress', 1],
    ['Canceled', 1],
    ['Rejected', 2]
  ]);
});

promise

function getData(callback) {
  return $.ajax({
    async: false,
    global: false,
    url: 'test.json',
    dataType: 'jsonp'
  });
}

getData.then(function (data) {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');
  data.addRows([
    ['Finished', data.sp],
    ['In Progress', 1],
    ['Canceled', 1],
    ['Rejected', 2]
  ]);
});

此示例利用了 jQuery 使用 promise interface 的事实.