jQuery ($.ajax) 和 Angular ($http) 中的请求不起作用答案

【问题标题】：Request in jQuery ($.ajax) and Angular ($http) not workjQuery ($.ajax) 和 Angular ($http) 中的请求不起作用
【发布时间】：2016-12-10 04:58:59
【问题描述】：

我正在尝试以最快、最直接的方式从 API 获取一些数据。使用邮递员，我可以轻松地在 url (http://www.wsfebracis.com.br/Json/ListarGrupos) 中给出一个 GET 并获取：

{
  "error": 0,
  "grupos": [
    {
      "Titulo": "A inteligência emocional do seu corpo",
      "ID": 1
    },
    {
      "Titulo": "Sua inteligência emocional em família",
      "ID": 2
    },
    {
      "Titulo": "Sua inteligência emocional em sociedade",
      "ID": 3
    },
    {
      "Titulo": "Sua inteligência emocional no trabalho",
      "ID": 4
    },
    {
      "Titulo": "Sua inteligência emocional nas férias",
      "ID": 5
    },
    {
      "Titulo": "Sua inteligência emocional no dia a dia",
      "ID": 6
    }
  ]
}

但是当我尝试使用 jQuery 或 Angular 进行 GET 时，我做不到。以下是我得到的两个调用和错误。

使用 jQuery

$.ajax({
  type: 'GET',
  dataType: 'JSONP',
  url: 'http://www.wsfebracis.com.br/Json/ListarGrupos/',
  success: function(data) {
    console.log(data);
  },
  error: function(e) {
    console.log(e);
  }
}).done(function( data ) {
  console.log("done ", data);
})
.fail( function(xhr, textStatus, errorThrown) {
    console.log('erro');
    console.log(xhr.responseText);
    console.log(textStatus);
    console.log(errorThrown);
});

对象 {readyState: 4, status: 200, statusText: "success"}

错误

未定义

解析器错误

错误：未调用 jQuery111108493785087484866_1448911631891(...)

使用角度

$http.jsonp('http://www.wsfebracis.com.br/Json/ListarGrupos/ListarGrupos')
.success(function(data, status, headers, config) {
  $log.error(data);
  $log.error(status);
  $log.error(headers);
  $log.error(config);
})
.error(function(data, status, headers, config) {
  $log.log(data);
  $log.log(status);
  $log.log(headers);
  $log.log(config);
});

未定义

(d){b||(b=ad(a));返回d?(d=b[F(d)],void 0===d&&(d=null),d):b}

对象{方法：“JSONP”，transformRequest：Array1，transformResponse：Array1，url： “http://www.wsfebracis.com.br/Json/ListarGrupos”，标题：对象}

Obs.：我可以看到返回，但它显示为错误，因此我无法操作数据。看！

重要！我无权访问 API，因此欢迎使用一些解决方案来阻止一些提议的方法（jQuery 或 Angular）。

【问题讨论】：

您返回的是 JSON，而不是 JSONP，这是有区别的
那么，呃，你为什么在网页中发送 JSONP 请求，而在 postman 中发送 JSON 请求？这是两种截然不同的数据类型。一个导致 XHR 请求需要 json，另一个导致脚本请求需要 javascript。
我尝试使用 $http.get，但 API 返回以下错误：“XMLHttpRequest cannot load wsfebracis.com.br/Json/ListarGrupos. No 'Access-Control-Allow-Origin' header is present on the请求的资源。因此，不允许访问源“localhost:8080”。”所以我使用 JSONP。
如果跨域服务不支持 JSONP，则无法使用 JSONP，原因与跨域服务不支持 CORS 时无法使用 XHR 的原因相同。
如果将 dataType 更改为 JSON 而不是 JSONP 会发生什么？

标签： javascript jquery angularjs

【解决方案1】：

通过在 API 中启用 CORS 已解决该问题。

【讨论】：

【解决方案2】：

在 Angular 应用中使用 $http 、 $q 注入器和 promise 方法

下面有一个例子

angular
        .module('yourApp')
        .factory('dataService', dataService);

    dataService.$injector = ['$http', '$q'];function dataSvc($http, $q) {
     var service = {
     getListGroupsSvc :getListGroupsSvc};return service;



  function getData(url) {
        var deferred = $q.defer();

        $http.get(url)
            .then(function (result) {
                deferred.resolve(result.data);
            },
                function (result) {
                    deferred.reject(result);
                });

        return deferred.promise;
    }

可以调用上面的函数

  function getListGroupsSvc(){

   var url = 'http://www.wsfebracis.com.br/Json/ListarGrupos/ListarGrupos';

   return getData(url);
   }

【讨论】：