Request in jQuery ($.ajax) and Angular ($http) not work

Question

I'm trying to get the fastest and most direct way some data from an API. Using the Postman I can so easily just giving a GET in the url (http://www.wsfebracis.com.br/Json/ListarGrupos) and 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
    }
  ]
}

But when I try to do a GET using jQuery or Angular, I can not. Below are the two calls and errors that I get.

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

Object {readyState: 4, status: 200, statusText: "success"}

erro

undefined

parsererror

Error: jQuery111108493785087484866_1448911631891 was not called(…)

Using Angular

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

undefined

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

Object {method: "JSONP", transformRequest: Array1, transformResponse: Array1, url: "http://www.wsfebracis.com.br/Json/ListarGrupos", headers: Object}

Obs.: I can see the return, but it is presented as an error, so I can not manipulate the data. Look!

Important! I do not have access to API, so it will be welcome solutions that arrest some of the proposed methods (jQuery or Angular).

so, uh, why are you sending a JSONP request in the web page and a JSON request in postman? that's two very different data types. One results in an XHR request expecting json, and the other results in a script request expecting javascript. — user400654
– user400654, Commented Nov 30, 2015 at 19:40
I tried to use a $http.get, but the API returns me the following error: "XMLHttpRequest cannot load wsfebracis.com.br/Json/ListarGrupos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:8080' is therefore not allowed access." So I'm using JSONP. — Ronald Araújo
– Ronald Araújo, Commented Nov 30, 2015 at 19:45
you can't use JSONP if the cross-origin service doesn't support JSONP for the same reason you can't use XHR if the cross-origin service doesn't support CORS. — user400654
– user400654, Commented Nov 30, 2015 at 20:00
what happens if you change the dataType to JSON instead of JSONP ? — James Gentes
– James Gentes, Commented Dec 1, 2015 at 4:20

Ronald Araújo · Accepted Answer · 2016-12-09 20:58:59Z

0

The problem has been solved by enabling CORS in the API.

answered Dec 9, 2016 at 20:58

Ronald Araújo

1,4995 gold badges21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rama Krshna Ila · Accepted Answer · 2015-11-30 21:11:17Z

Use $http , $q injectors and promise method in angular app

An Example can be found below

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

You can Call the above function

  function getListGroupsSvc(){

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

   return getData(url);
   }

Collectives™ on Stack Overflow

Request in jQuery ($.ajax) and Angular ($http) not work

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related