AngularJS http.jsonp 回调未定义答案

【问题标题】：AngularJS http.jsonp callback not definedAngularJS http.jsonp 回调未定义
【发布时间】：2016-04-19 17:11:22
【问题描述】：

我正在尝试从我的控制器内部检索 jsonp 数据。我想从 $http.jsonp 中的 url 中获取一些 jsonp 数据并将其传递给一个成功函数，该函数循环遍历数据，然后将其推送到变量 dataxx 但是我不断收到此错误：

Uncaught ReferenceError: myJsonMethod is not defined

 angular.module('app',  ['onsen'])

    .controller('ChartController', ['$scope', '$http', function($scope,$http) {
      this.data = [{
        key: 'Data',
        values: []
      }];
      $http.jsonp("https://demo8162910.mockable.io/json?callback=myJsonMethod").
            success(function(data, status, headers, config) {
                //what do I do here?
                dataxx.push({"x":9,"y":11},{"x":9,"y":18});
            }).
            error(function(data, status, headers, config) {
                $scope.error = true;
            }); 

      $scope.data = [{
            key: 'Data',
            values: dataxx
        }];       

    }])

    .factory('d3', [function() {
      return d3;
    }])

    .factory('nv', [function() {
      return nv;
    }])

    .directive('lineChart', ['d3', 'nv', function(d3, nv) {
      return {
        restrict: 'E',
        scope: {
          data: '=',
          height: '@',
          width: '@'
        },
        template: '<svg ng-attr-height="{{ height }}" ng-attr-width="{{ width }}"></svg>',
        link: function(scope, element) {
          var svg = element.find('svg'),
            chart;

          var update = function() {
            d3.select(svg[0])
              .datum(scope.data)
              .call(chart);
          };

          scope.$watch(function() { return angular.toJson(scope.data); }, function() {
            if (chart) {
              update();
            }
          });

          scope.$on('chartloaded', update);

          nv.addGraph(function() {
            chart = nv.models.lineChart()
              .showLegend(false)
              .showYAxis(true)
              .showXAxis(true);

            chart.xAxis
              .axisLabel('x')
              .tickFormat(d3.format('.2f'));

            chart.yAxis
              .axisLabel('y')
              .tickFormat(d3.format('.2f'));

            nv.utils.windowResize(function() {
              chart.update()
            });

            scope.$emit('chartloaded');

            return chart;
          });
        }
      }
    }]);

【问题讨论】：

stackoverflow.com/questions/12066002/…
你定义函数myJsonMethod了吗？如果没有，你可以使用JSON_CALLBACK

标签： javascript angularjs onsen-ui

【解决方案1】：

从documentation 引用关于传递给jsonp 方法的url 参数：

指定请求目的地的相对或绝对 URL。回调的名称应该是字符串 JSON_CALLBACK。

所以：

https://demo8162910.mockable.io/json?callback=JSON_CALLBACK

或者，如果您想使用myJsonMethod，请确保您已经定义了将被调用的此类函数：

function myJsonMethod(result) {
    ... 
}

在您的情况下，您使用了标准的 .success 回调，它在内部将定义一个名为 JSON_CALLBACK 的函数。

不幸的是，从我所见，这个远程端点完全忽略了callback 查询字符串参数。以下网址都返回相同的结果，这当然是错误的：

因此，我建议您与已实现此 API 的开发人员交谈，并要求他们尽可能不要硬编码回调名称，而是尊重查询字符串参数。

如果由于某种原因无法修复此 API，那么您唯一的机会就是定义一个名为 myJsonMethod 的函数，正如我之前展示的那样。

【讨论】：