javascript - Angular JSON 与 JSONP $promise

标签 javascript json angularjs

如果我从我的controller.js进行这个JSON调用:

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

然后控制台按预期更新为:是的,在这里

但是,如果我将请求更改为 JSONP 请求:

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

  });
})

即使我知道调用已完成并且已检索到数据,控制台也不会打印任何内容?

如何打印 JSONP 日志语句?

答案:

感谢以下两个答案:我需要正确格式化 API 的返回响应。

在 NULL 的情况下,我通过 PHP 返回:print $callback."null";

我需要返回的只是函数包装器内的一个空数组,或者您认为合适的任何其他格式正确的 JSONP 响应。就我而言,它是: print $callback."([])";

最佳答案

首先您需要确定从后端返回的数据格式是什么。 JSONP 响应是一个 JSON 数据,其中包含一个函数调用。

我的 php API 实现:

<?php
    $callback = isset($_GET['callback'])?$_GET['callback']:'JSON_CALLBACK';

    $array = array("name"=>"test","email"=>"<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85f1e0f6f1c5e1ece2ecf1e4e9abe6eae8" rel="noreferrer noopener nofollow">[email protected]</a>");

    echo $callback."(".json_encode($array).")";
?>

由于包装的函数调用名称是由参数“callback”确定的,因此当您使用 ngResource 模块时,请记住为回调参数和自定义方法属性“callback”指定正确的名称。

Angular 实现:

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:

enter image description here

获取回复: enter image description here

希望这对您有帮助。

关于javascript - Angular JSON 与 JSONP $promise,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20206817/

相关文章:

javascript - ng-view 中的嵌套指令在 AngularJs 中不起作用

javascript - 从 jQuery 中的 href 标签加载 div 中的内容

javascript - 在随机生成图像的 PHP 脚本中,为什么在页面上多次调用它总是生成相同的图像?

json - 如何在 Jekyll 上使用 pygment JSON 代码?

json - 使用 django query set values() 索引到 JSONField

angularjs - 如何使用 Angular Material 触发按钮选择?

javascript - 如何从 Javascript 图像中删除线条

javascript - 当我右键单击鼠标时不显示在新选项卡菜单中打开

json - 使用Play呈现JSON!和Scala

http - $http.post 不适用于 JSON 数据