使用 jquery jsonp 访问 Coursera api 的数据表单

Posted 2023-03-03

【中文标题】使用 jquery jsonp 访问 Coursera api 的数据表单

【英文标题】：Access the data form Coursera api using jquery jsonp

【发布时间】：2015-02-06 01:13:40

【问题描述】：

今天我在阅读 Coursera catalog 文档后尝试使用 jquery 访问 coursera api。写了个代码，报错No 'Access-Control-Allow-Origin' header is present on the requested resource.于是google了一下，发现可以使用Jsonp进行跨域请求。所以我只是使用 $.ajax 函数向这个url 发出请求，或者说这个simple url 和其他一些这样的url，但失败了。

网址上的数据类似于"elements":["id":2,"shortName":"ml","name":"Machine Learning","links":],"linked":

我写了以下代码。

$(document).ready(function() 
$.ajax(
    url: "https://api.coursera.org/api/catalog.v1/courses/2",
    type: "GET",
    dataType: 'jsonp',
    jsonpCallback: 'localJsonpCallback',
    contentType: 'application/json',
    success: function()
        alert("success");
    ,
    error:function(jqxhr, textStatus, error)
        alert("textStatus : " + textStatus + "\n error" + error);
       
  ); 

  function localJsonpCallback(data) 
  alert("localJsonpCallback : " + data);
  
  );

上述代码失败并进入错误处理程序，其打印错误为textstatus: parseError 和Error: localJsonpCallback was not called。我没有得到代码有什么问题。此外，在控制台中，使用 url https://api.coursera.org/api/catalog.v1/courses/2 时出现错误 Uncaught SyntaxError: Unexpected token : 和 2?callback=localJsonpCallback&_=1418037208234:1。

需要使用jsonp回调函数吗？我们不能在成功处理程序中处理直接响应吗？

【问题讨论】：

我已将这些文件放在我的桌面上。我基本上是在尝试创建一个 chrome 扩展，所以我必须将这些文件放在一些非服务器目录中。

我认为 Coursera API 不支持 JSONP :(

【参考方案1】：

这行得通

可以直接在success回调中处理

$(document).ready(function() 
  $.ajax(
    url: "https://api.coursera.org/api/catalog.v1/courses/2",
    type: 'GET',
    dataType: "json",
    success: function(data) 
        console.log(JSON.stringify(data,null,4));
    
  ); 
);

返回

 
    "elements": [
        
            "id": 2,
            "shortName": "ml",
            "name": "Machine Learning",
            "links": 
        
    ],
    "linked": 

希望对你有帮助

【讨论】：

它在服务器端工作。谢谢 。必须将此代码放在位于var/www/ 下的文件中。

【参考方案2】：

试试这个：-

$(document).ready(function()     
$.getJSON("https://api.coursera.org/api/catalog.v1/courses?ids=2,3&fields=language,shortDescription&includes=sessions&fields=status&categories", function (response) 
alert(JSON.stringify(response));
,'jsonp'); 
 );

Demo

【讨论】：

它在服务器端工作。谢谢 。必须将此代码放在位于var/www 下的文件中。

【参考方案3】：

在我们的例子中你不需要使用jsonp，你可以使用通常的ajax请求

$.ajax(
    url: "https://api.coursera.org/api/catalog.v1/courses/2",
    type: "GET",
    dataType: 'json',
    success: function (res) 
      console.log(res);
    ,
    error: function(jqxhr, textStatus, error) 
        alert("textStatus : " + textStatus + "\n error" + error);
    
);

演示：http://jsbin.com/payare/1/edit?js,console