AngularJS中带有$ http的HTTP JSONP请求问题

时间：2016-12-07 18:50:09

标签： javascript angularjs ajax jsonp

当我尝试在angularJS中使用JSONP方法时，我收到了波纹管错误。

  

未捕获的SyntaxError：意外的令牌：http://example.com/getSomeJson?format=jsonp&json_callback=angular.callbacks._0

我在这里做错了什么，这是带有http请求的AngularJs控制器：

更新的问题详情

请参阅下面的代码片段来重现我的问题，我已经评论了一些.js来说明我到目前为止所做的尝试。

＆＃13;
＆＃13; 
var app = angular.module('app', []); 

app.controller('mainController', ['$http', 'mainService', function($http, mainService){

	mainCtrl = this;

	mainCtrl.test = "If you can see this the mainController works"

	var promise = mainService.getJson();
	promise.then(function (data)
	{
		mainCtrl.json = data;
	});
}]);

app.service("mainService", function ($http, $q)
{
		var deferred = $q.defer();
 
    /* 	
    // Method to Grab JSON that has CORs enabled:
    // JSON resource with CORs enabled
	var url = 'https://jsonplaceholder.typicode.com/posts/1';
	$http({
	    method: 'GET',
	    cache: true,
	    url: url,
           headers: {  
           'Content-Type': 'application/json;charset=UTF-8'  
      	}
	}).
	success(function(response) {
	    //your code when success
	    deferred.resolve(response);
	    console.log('HTTP CORS SUCCESS!');
	}).
	error(function(response) {
	    //your code when fails
	    console.log('HTTP CORS ERROR!');
	});
*/	


	/* */
    // Method to Grab JSON that has CORs enabled:
	// JSON resources without CORs enabled
	var url = 'http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json' // does not work?
    // var url = 'http://samcroft.co.uk/json-data/sample'  // this one works

	$http({
        method: 'jsonp',
        url: url + '?callback=JSON_CALLBACK',
    }).
	success(function(response) {
	    //your code when success
	    deferred.resolve(response);
	    console.log('JSONP SUCCESS!');
	}).
	error(function(response) {
	    //your code when fails
	    console.log('JSONP ERROR!');
	});


	
	this.getJson = function ()
	{
		return deferred.promise;
	};


});
＆＃13; 
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-route.js"></script>
	<script src="app.js"></script>
</head>
<body ng-controller="mainController as mainCtrl">
	<p>{{mainCtrl.test}}</p>
	<hr />
	<p>You should also see the JSON obeject below:</p>
	{{mainCtrl.json}}
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

ORIGIONAL QESTION DETAILS 

app.controller('testController', ['$scope', '$http', function($scope, $http){

    var url = 'http://example.com/getSomeJson';

    $http({
        method: 'JSONP',
        url: url,
        params: {
            format: 'jsonp',
            json_callback: 'JSON_CALLBACK'
        }
    }).
    success(function(data) {
        //your code when success
        $scope.data = data;
        console.log('SUCCESS!');
    }).
    error(function(status) {
        //your code when fails
        console.log('ERROR!');
    });
}]);

当我在chromes sources面板中查看json时，我会看到错误突出显示的位置。 enter image description here

知道我做错了什么吗？或者它是如何配置API服务的问题？

2 个答案:

答案 0 :(得分：1)

在这里： - ）

您尝试使用jsonp请求的代码看起来不错，但您使用的网址不支持jsonp请求，这就是您收到错误的原因。

如果您使用$http.get尝试相同的网址，则可以正常使用。

要支持jsonp来电，回复应该包含JSON_CALLBACK ()，如下所示

JSON_CALLBACK ({ /* JSON */ })

因此，我将此更改为有效的jsonp网址并且有效！

https://angularjs.org/greet.php?callback=JSON_CALLBACK

您可以在浏览器中尝试使用此网址并查看响应，以及JSON_CALLBACK ()包装的方式。

但是如果你尝试下面的网址，你可以看到json没有任何包装。

http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json?callback=JSON_CALLBACK

找到api是否支持jsonp是不同的。

另外，我已使用与另一个service问题解答相同的语法更改了下面的SO，

https://stackoverflow.com/a/41030976/7055233

工作代码：

var app = angular.module('app', []); 

app.controller('mainController', ['$http', 'mainService', function($http, mainService){

	mainCtrl = this;

	mainCtrl.test = "If you can see this the mainController works"

	var promise = mainService.getJson();
	promise.then(function (data)
	{
		mainCtrl.json = data;
	});
}]);

app.service("mainService", function ($http, $q)
{
    var deferred = $q.defer();
	var url = 'https://angularjs.org/greet.php';
	//var url = 'http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json';
 
    /* 	
    // Method to Grab JSON that has CORs enabled:
    // JSON resource with CORs enabled
	var url = 'https://jsonplaceholder.typicode.com/posts/1';
	$http({
	    method: 'GET',
	    cache: true,
	    url: url,
           headers: {  
           'Content-Type': 'application/json;charset=UTF-8'  
      	}
	}).
	success(function(response) {
	    //your code when success
	    deferred.resolve(response);
	    console.log('HTTP CORS SUCCESS!');
	}).
	error(function(response) {
	    //your code when fails
	    console.log('HTTP CORS ERROR!');
	});
*/	


	/* */
    // Method to Grab JSON that has CORs enabled:
	// JSON resource without CORs enabled
  function getJson() {

	// $http.jsonp(url + "?callback=JSON_CALLBACK").  // this does not work either
	$http.jsonp(url + '?callback=JSON_CALLBACK').
	then(function(response) {
	    //your code when success
	    deferred.resolve(response);
	    console.log('JSONP SUCCESS!');
	}, function(response) {
	    //your code when fails
	    console.log('JSONP ERROR!');
        deferred.reject(response);
	});
	
    return deferred.promise;

  }
	
	this.getJson = getJson;


});
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-route.js"></script>
	<!--<script src="app.js"></script>-->
</head>
<body ng-controller="mainController as mainCtrl">
	<p>{{mainCtrl.test}}</p>
	<hr />
	<p>You should also see the JSON obeject below:</p>
	{{mainCtrl.json}}
</body>
</html>

答案 1 :(得分：0)

JSONP callback must be specified by jsonpCallbackParam

  

突然改变

     

您无法再在JSONP请求中使用JSON_CALLBACK占位符。   相反，您必须提供将通过配置对象的jsonpCallbackParam属性传递回调的查询参数的名称，或通过$http.defaults.jsonpCallbackParam属性提供应用范围，默认为"callback"

- 添加到 AngularJS v1.6.0-rc.2

更新

OP示例代码不起作用，因为http://run.plnkr.co API不支持JSONP。

JSONP仅适用于某些API早于ACCESS-CONTROL headers的网站。

有关详细信息，请参阅JSONP Demystified

相关问题
最新问题