Question

对于我需要的功能，我发现了一个非常好的AJAX示例。基本上它调用了Yahoo API。但我正在与Angular.JS合作。所以我不知道如何转换它。有什么帮助吗？

 $.ajax({
        type: 'GET',
        dataType: 'jsonp',
        jsonp: 'callback',
        jsonpCallback: 'YAHOO.Finance.SymbolSuggest.ssCallback',
        data:{
            query: request.term
        },
        url: 'http://autoc.finance.yahoo.com/autoc',
        success: function (data) {
            alert("yes");
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }
    });

所以我正在寻找的是如何将上面的代码转换成这样的。样本应该只打印返回值。见this JsFiddle。特别是，我不知道如何处理jsonpCallback参数。这是我在其他任何例子中都找不到的。

<div ng-app='MyModule' ng-controller='DefaultCtrl'>
    {{ test() }}
</div>

的JavaScript

function DefaultCtrl($scope, myService) {
    $scope.test = myService.test;
}

angular.module('MyModule', [])
    .factory('myService', function () {
        return {
            test: function () {

                $http.get("?????")

                .success(function(data, status, headers, config) {
                    return data;
                    })
                .error(function(data, status, headers, config) {
                    return "there was an error";
                })
            }
        }
    });

中间解决方案 - 在您的所有帮助之后 - 看起来像这样。谢谢。我必须安装Chrome extension，只要您使用the updated JsFiddle，就可以进行跨域调用。我改变了将参数传递给http-get调用的方式，并且还包括$ q（promise）处理。结果包含来自Yahoo YQL API的有效列表。只需要处理那个数组。

function DefaultCtrl($log, $scope, $http, myService) {

    var promise = myService.getSuggestions('yahoo');

    promise.then(
          function(payload) { 
              $scope.test = payload;
              $log.info('received data', payload);
          },
          function(errorPayload) {
              $log.error('failure loading suggestions', errorPayload);
          });    
}

angular.module('MyModule', [])
.factory('myService', function ($http, $log, $q) {
    return {
        getSuggestions: function (symbol) {            

            var deferred = $q.defer();

            $http.get('http://d.yimg.com/autoc.finance.yahoo.com/autoc', {
                cache: true,
                params: { 
                    query: symbol,
                    callback: 'YAHOO.Finance.SymbolSuggest.ssCallback'
                }
            })
            .success(function(data) {
                deferred.resolve(data);
            })
            .error(function(msg, code) {
                deferred.reject(msg);
                $log.error(msg, code);
            });

            return deferred.promise;
        }
    }
});

Answer 1

只看一下文档

https://docs.angularjs.org/api/ng/service/ $ HTTP

$http.get('http://autoc.finance.yahoo.com/autoc', 
  {dataType: 'jsonp', 
   jsonp: 'callback', 
   jsonpCallback: 'YAHOO.Finance.SymbolSuggest.ssCallback'}).success(function(data){ alert("yes"); });

Answer 2

使用Ajax调用，您必须使用promise

仅使用test {{test（）}}

因为在你的控制器中调用你的工厂ajax函数然后在控制器中你得到未定义的响应。

所以使用诺言。

<强>服务：

的

的
var demoService = angular.module('demoService', []) .service('myService',['$http', function($http) { this.getdata = function(entity){ var promise = $http({ method : 'GET', url : 'services/entity/add', data : entity, dataType: 'jsonp', jsonp: 'callback', jsonpCallback: 'YAHOO.Finance.SymbolSuggest.ssCallback', headers : { 'Content-Type' : 'application/json' }, cache : false }).then(function (response) { return response; }); return promise; }; }]);

的

控制器：

var demoService = angular.module('demoService', []) .controller('myctr',['$scope','myService',function($scope,myService){ myService.getdata().then(function(response){ //Success },function(response){ //Error }); }]);

的

现在您可以在控制器成功

中看到您的json

如何将AJAX $ http调用转换为Angular.JS

2 个答案: