Angular JSON vs JSONP $ promise [英] Angular JSON vs JSONP $promise
问题描述
如果我从我的controller.js进行此JSON调用：
if i make this JSON call from my controller.js:
$scope.userInvestors = userInvestors.query({UserID:$scope.user.uid},
function(userInvestors) {
console.log("yep yer here");
}
使用此$资源：
factory('userInvestors', function($resource){
return $resource('http://wherevertheserveris/Rest/userInvestors.php', {}, {
query: {method:'GET', params:{}, isArray:true}
});
})
然后是控制台按预期更新：yep yer here
then the console is updated as expected with: yep yer here
但是如果我将请求更改为JSONP请求：
however if I change the request to a JSONP request:
$scope.userInvestors = userInvestors.query({UserID:$scope.user.uid,
callback: 'JSON_CALLBACK'}, function(userInvestors) {
console.log("but are you here?");
}
和资源：
factory('userInvestors', function($resource){
return $resource('http://wherevertheserveris/Rest/userInvestors.php', {}, {
query: {method:'JSONP', params:{}, isArray:true}
});
})
即使我知道呼叫已完成，也没有任何内容打印到控制台检索到的数据？
nothing is printed to the console even though I know the call was completed and the data retrieved?
如何打印我的JSONP日志语句？
how do I get my JSONP log statement to print?
感谢以下两个答案：我需要正确格式化API的返回响应。
thanks to both answers below: I needed to properly format the return response from the API.
在NULL的情况下，我通过PHP返回： print $ callback。null;
In the case of NULL I was returning via PHP: print $callback."null";
我需要返回的只是函数包装器中的空数组，或者您认为合适的其他格式正确的JSONP响应。在我的情况下它是： print $ callback。（[]）;
What I needed to return was just an empty array inside a function wrapper, or whatever other properly formatted JSONP response you find appropriate. In my case it was: print $callback."([])";
推荐答案
首先，您需要确保从后端返回的数据格式。 JSONP响应是一个JSON数据，其中包含一个函数调用。
First of all you need to make sure that what data format is returning from back-end. JSONP response is a JSON data with a function call wrapped around it.
我的php API实现：
<?php
$callback = isset($_GET['callback'])?$_GET['callback']:'JSON_CALLBACK';
$array = array("name"=>"test","email"=>"test@digital.com");
echo $callback."(".json_encode($array).")";
?>
因为包装的函数调用名称由参数'callback'确定，所以请记住指定正确的名称当你使用ngResource模块时，回调参数和自定义方法属性'callback'。
Because the wrapped function call name is determined by the param 'callback', remember to assign proper name to callback param and custom method property 'callback' when you're using ngResource module.
角度实现：
angular.module("app",['ngResource'])
.controller("myCtrl",function($scope,userInvertors){
$scope.jsonpTest = function(){
$scope.result = userInvertors.query(function(response){
console.log(response);
});
}
})
.factory("userInvertors",function($resource){
return $resource('http://your.domain.com/API/getUser/123',{},{
query:{
method:'JSONP',
params:{callback:"JSON_CALLBACK"},
callback:"JSON_CALLBACK"
}
});
});
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ngResource</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular-resource.js"></script>
<script src="js/ngResource.js"></script>
</head>
<body ng-app="app">
<div ng-controller="myCtrl">
<input type="button" ng-click="jsonpTest()" value="JSONP"/>
</div>
</body>
</html>
截屏：
API：
获取回复：
Get response:
希望这对你有所帮助。
这篇关于Angular JSON vs JSONP $ promise的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
