如何将 JSONP 数据作为 javascript 对象获取答案

【问题标题】：How to get JSONP data as a javascript object如何将 JSONP 数据作为 javascript 对象获取
【发布时间】：2014-07-04 02:01:11
【问题描述】：

我正在尝试获取 JSONP 数据，以便可以在 javascript 中对其进行解析。我有一些可以解析的模拟数据，如下所示：

var employees = [
    { "Cost": 50, "Date": "2014-05-25T00:00:00", "Distance": "5k", "Id": "137", "Location": "Salt Lake City", "Name": "Employee 1", "Type": "normal" },
    { "Cost": 50, "Date": "2014-05-25T00:00:00", "Distance": "5k", "Id": "138", "Location": "Provo", "Name": "Employee 2", "Type": "normal" },
    { "Cost": 50, "Date": "2014-05-25T00:00:00", "Distance": "5k", "Id": "139", "Location": "Ogden", "Name": "Employee 3", "Type": "normal" }
];

但是当我尝试使用 JSONP 从另一台服务器上的 RESTful API 获取相同的数据时，它不起作用。我希望能够以与模拟数据相同的格式获取数据。我不知道我请求它的方式是否错误，但这是我怀疑的，因为数据在那里，并且是 JSONP 格式。这是我的请求方式：

var employees;
var url = 'http://marketing.wasatchtechies.com/api/JSONraces/callback=?';

$.ajax({
    type: 'GET',
    url: url,
    async: true,
    contentType: "application/json",
    dataType: 'jsonp',
    success: function (data) {
        employees = data;
    },
    error: function (err) {
        // nothing
    }
});

感谢观看。

编辑：当您点击此链接http://marketing.wasatchtechies.com/api/JSONraces?callback=foobar 时，您会得到以下信息：

foobar([{"id":137,"name":"JE Cosgriff Tiger Trot","location":"Salt Lake City","date":"2014-05-25T00:00:00","url":"http://www.utahrunning.com/events/race/ref/JE-Cosgriff-Tiger-Trot","distance":"5k","cost":"50        ","type":"normal"},{"id":138,"name":"Race for Grief Event","location":"West Bountiful","date":"2014-05-26T00:00:00","url":"http://www.utahrunning.com/events/race/ref/Race-for-Infant--Pregnancy-Loss---10K-run--2-mile-awareness-walk","distance":"5k","cost":"45        ","type":"normal"},{"id":139,"name":"Heber Valley Memorial Run","location":"Heber City","date":"2014-05-26T00:00:00","url":"http://www.utahrunning.com/events/race/ref/Heber-Valley-Memorial-Run","distance":"5k, mile","cost":"35        ","type":"glow"}]);

【问题讨论】：

你的回调函数在哪里？ JSONP 通过在您的页面中包含一个脚本来工作，该脚本将使用您的数据作为函数的参数调用一个函数。如果 url 中有 callback=?，jQuery 会自动映射它，并使用选项 success 中设置的函数
您需要一个成功函数，然后将员工分配给 responseText
感谢您的 cmets，我刚刚根据您的 cmets 编辑了我的代码，但仍然无法正常工作。我是否正确实施了您的 cmets？
async: false 不适用于 jsonp。停止使用 async false。
当您使用以下 url 访问服务器时，我们需要看到服务器的实际响应：http://marketing.wasatchtechies.com/api/JSONraces/callback=foobar。如果不匹配 foobar(<array or object here>) 则服务不支持该端点的 jsonp。

标签： javascript jquery ajax json

【解决方案1】：

你只是在回调中设置它：

var employees;

$.ajax({
  type: 'GET',
  url: url,
  contentType: "application/json",
  dataType: 'jsonp',
  success: function(data) {
    employees = data; 
  }
});

【讨论】：

文档说：Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation

【解决方案2】：

你缺少回调方法

您的 ajax 请求中的成功和错误方法。像这样的

var employees = $.ajax({
    type: 'GET',
    url: url,
    async: false,
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(result) {
        // access your mock data in result
    },
    error: function(err) {
         // acces err object to handle the error
    }
});

【讨论】：