Question

我想通过带有angularjs的jsonp调用我的一个web服务。

当我直接在浏览器中拨打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中手动完成吗？浏览器不会自动执行此操作吗？

Answer 1

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

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

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

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

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

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

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

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

Answer 2

尝试使用以下代码段。

(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);

Answer 3

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;
}

现在它完美无缺。谢谢。

如何用jsonp获取我的webservice的结果？

3 个答案: