如何使用 jsonp 获取我的 web 服务的结果？答案

【问题标题】：how to get results of my webservice with jsonp?如何使用 jsonp 获取我的 web 服务的结果？
【发布时间】：2014-12-03 02:59:12
【问题描述】：

我想通过 jsonp 和 angularjs 调用我的网络服务之一。

当我直接在浏览器中调用http://example.com/files?callback=JSON_CALLBACK 时，我得到了：

["folder1", "folder2"]

当我从 angularjs 调用时：

$http.jsonp('http://example.com/files?callback=JSON_CALLBACK')
     .success(function(data){ 
         console.log(data);
         $scope.folders = data;
});

console.log 没有出现.... 我做错了什么？

我的网络服务必须返回

JSON_CALLBACK(["folder1", "folder2"])

？我应该在我的 api 中手动执行吗？浏览器不会自动执行此操作？

【问题讨论】：

是的，服务必须使用来自 GET 参数 callback 的值包装响应。

标签： angularjs jsonp

【解决方案1】：

bmleite 是对的，我必须在我的 API 上实现这个逻辑。在我的示例中，我的服务器是用 Silex 制作的：

public function index()
{
    $callback = $this->request->get('callback');
    $files    = $this->app['file.manager']->getList();

    $response = new \Symfony\Component\HttpFoundation\JsonResponse();
    $response->setData($files);
    $response->setCallback($callback);

    return $response;
}

它现在完美运行。谢谢。

【讨论】：

【解决方案2】：

您当前返回的内容 (["folder1", "folder2"]) 无效 JSONP。 JSON 结果必须由 javascript 函数调用包装才能成为有效的 JSONP。

例如，当您使用这样的 URL 时：

http://example.com/files?callback=JSON_CALLBACK

Angular 会将 JSON_CALLBACK 参数替换为 Angular 函数名称（内部创建），例如：

http://example.com/files?callback=angular.callbacks._0

然后您的服务器需要能够读取 callback 参数并返回如下结果：

angular.callbacks._0(["folder1", "folder2"]);

这不是一种自动机制，您需要在您的网络服务器上实现该逻辑。

【讨论】：

好的，我明白了，这正是我的问题。我试试，然后标记为已解决

【解决方案3】：

尝试使用以下代码 sn-p。

(function($) {
var url = 'http://example.com/files?callback=JSON_CALLBACK';

$.ajax({
   type: 'GET',
    url: url,
    async: false,
    jsonpCallback: 'jsonCallback',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(data) {
       console.dir(data);
    },
    error: function(e) {
       console.log(e.message);
    }
});

})(jQuery);

【讨论】：

我收到“未定义”为 e.message 的错误案例
是的，它调用错误回调函数是因为你返回了无效的json字符串，这就是代码出现异常的原因
返回数据类似于 {"data":["folder1","folder2"]}