为什么我的跨域JSON调用不能工作？

Question

远程url http://remote-server/json-data.php包含这种格式的数据：

[{"id":"1","partname":"R1","date":"10/12/2012"},{"id":"2","partname":"R2","date":"10/10/2012"},{"id":"3","partname":"R3","date":"07/12/2012"},{"id":"4","partname":"R4","date":"14/06/2012"}]

这是我的jQuery，它应该读取上面的数据并将其显示在html或php文件中。这一做法目前不起作用：

$(document).ready(function () {
var url = "http://remote-server/json-data.php";

var success = function(data){
    data = $.parseJSON(data);
    $.each(data, function(index, element) {
        $('div.outerBox').append('<div>'+element.partname+'/'+element.date+'</div>');
    });
}


$.ajax({
    type: 'GET',   
    url: url,
    dataType: "jsonp",
    crossDomain: true,         
    cache:false,
    success: success,
    error:function(jqXHR, textStatus, errorThrown){
      alert(errorThrown);
    }
});
});

当我刷新页面时，我会在javascript警告框中得到一条错误消息，如下所示：Error: jQuery142452552225_55355545554 was not called。

我试着将这个远程文件放入本地服务器，它似乎可以很好地应用于$.getJSON()函数。不知道我在这里做错了什么。

Answer 1

如果服务器没有准备好处理JSONP请求，它就不能工作.

JSONP并不是严格意义上的数据客户端操作，它涉及到服务器交互。

当使用jsonp时，响应应该包含在javascript函数中。

因此，为了简单起见，例如，您有一个空的JSON对象，服务器将返回给您。即{}

若要对要执行的对象发出标准请求，请执行

$.ajax({
    type: 'GET',   
    url: url,
    dataType: "json",
    success: function(data) {
      alert("Retrieved : " + JSON.stringify(data);
    },
    error:function(jq, st, error){
      alert(error);
    }
});

所做的就是发出一个标准的HTTP请求，并从url中检索空对象。

如果您想在同一个url中使用JSONP，您可以尝试如下

$.ajax({
    type: 'GET',   
    url: url,
    dataType: "jsonp",
    crossDomain: true,
    success: function(data) {
      alert("Retrieved : " + JSON.stringify(data);
    },
    error:function(jq, st, error){
      alert(error);
    }
});

它所做的是获取您有一个附加?callback={Some Random jQuery function}的url。在您的例子中，随机jQuery函数是jQuery142452552225_55355545554。服务器必须接受那个空的JSON对象并将其包装在回调中，所以它不应该返回{}，而应该返回带有HTTP类型的应用程序/json头的jQuery142452552225_55355545554({})。

下面是对coderwall的JSON请求的一个小提琴，它失败了，然后尝试一个成功工作的JSONP请求。JSONP实例

Answer 2

远程url http://remote-server/json-data.php包含这种格式的数据： {"id":"1“、”部分名称“：”R1“、”日期“：”10/12/2012“}、{"id":"2”、“部分名称”：“R2”、“日期”：“10/10/2012”}、{"id":"3“、”部分名称“：”R3“、”日期“：”07/12/2012“}、{"id":"4”、“部分名称”：“R4”、“日期”：“14/06/2012”}

这就是问题所在。您的远程url正在返回JSON，而不是JSONP。这就是为什么你不能消费它。远程服务器应该返回JSONP：

callbackFunctionName([
    {
        "id": "1",
        "partname": "R1",
        "date": "10/12/2012"
    },
    {
        "id": "2",
        "partname": "R2",
        "date": "10/10/2012"
    },
    {
        "id": "3",
        "partname": "R3",
        "date": "07/12/2012"
    },
    {
        "id": "4",
        "partname": "R4",
        "date": "14/06/2012"
    }
]);

应该通过向服务器传递参数来动态地指定callbackFunctionName。如下所示：

http://remote-server/json-data.php?callback=callbackFunctionName

当您调用这个url时，应该返回一个JSONP响应。