这有效

Question

今天我在阅读Coursera catalog文档后尝试使用jquery访问coursera api。我写了一个代码并得到一个错误No 'Access-Control-Allow-Origin' header is present on the requested resource.所以做了一些谷歌并发现Jsonp可用于发出跨域请求。所以我只是使用$ .ajax函数向此url发出请求，或者说这个simple 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。我没有弄错代码。此外，在控制台中，我在使用网址https://api.coursera.org/api/catalog.v1/courses/2时收到错误Uncaught SyntaxError: Unexpected token :和2?callback=localJsonpCallback&_=1418037208234:1。

是否有必要使用jsonp回调函数？我们无法在成功处理程序中处理直接响应。

Answer 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": {}
}

希望这会有所帮助

Answer 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

Answer 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

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

3 个答案:

这有效