jQuery Ajax request turn into AngularJS $http request

Question

I have such jQuery Ajax request. I need to turn it into an AngularJS $http request. How can I do that?

    $.ajax({
        type: "POST",
        dataType: "jsonp",
        crossDomain: false,
        data:{
            user: username,
            pass: password
        },
        beforeSend: function (request){
            request.setRequestHeader("Accept-Language", languageCode);
        },
        url: someUrl
    })
    .done(function (data, textStatus, jqXHR){
        console.log(data);
    })
    .fail(function (jqXHR, textStatus){
       console.log("failed");
    });

My Angular Implementations

Response {"data" : "", "status" : "200", "config" : .... } Data is empty

login : function (username, password) {
  return $http({
    method: 'POST',
    url: someUrl,
    data: {
      user: username,
      pass: password
    },
    headers: {
      'Accept-Language': languageCode
    }
  })
}

I succeeded to get data wrapped in JSON_CALLBACK with next request. But I don't know how to call that callback. It is not done automatically. Response looks like {data:"JSON_CALLBACK({mydata})"...}

login : function (username, password) {
  var url = someUrl
    + '?callback=JSON_CALLBACK&user=' + username
    + '&pass=' + password;

  return $http.post(url);
},

Yes, I tried $http service, I tried different variations of requests. I succeeded few times to get response using $http.get/$http.post requests but they were wrapped in JSON_CALLBACK. How could I get data from that callback? It is not reachable from .success .error . Request implementation above is not mine, I just need to do the same with angular. — Alexander Kozhokar
– Alexander Kozhokar, Commented Aug 21, 2016 at 10:04
I get undefined data everytime I use $http.jsonp() Maybe it is a server bug ? I find request above strange, but it works — Alexander Kozhokar
– Alexander Kozhokar, Commented Aug 21, 2016 at 10:11
You didn't post your code, and still you expect answer to your problem? I'm pretty sure you are doing something wrong, so it doesn't work. But who knows without seeing your code (angular version). — dfsq
– dfsq, Commented Aug 21, 2016 at 10:15

georgeawg · Accepted Answer · 2016-08-22 16:16:18Z

There is no such thing as a JSONP POST request. When jQuery sees dataType: jsonp, it ignores the method propery and uses a script GET request. The data is added as parameters of the URL.

In AngularJS, JSONP requests are specified with method: 'JSONP. The callback parameter needs to be JSON_CALLBACK and must be capitalized.

login : function (username, password) {
  return $http({
    //method: 'POST',
    method: 'JSONP',
    url: someUrl,
    //data: {
    params: {
      user: username,
      pass: password,
      callback: "JSON_CALLBACK"
    },
    headers: {
      'Accept-Language': languageCode
    }
  })
}

Be aware that since the data is sent as URL parameters, sensitive information such as passwords are vulnerable to snooping attacks.

To demonstrate on JSFiddle:

var url="//jsfiddle.net/echo/jsonp/";
var params = { user: "myUser",
               pass: "123456",
               callback: "JSON_CALLBACK"
            };
$http.jsonp(url, { params: params} )
    .then(function onSuccess(response) {
         $scope.response = response;
         console.log(response);
    })

The DEMO on JSFiddle.

miqe · Accepted Answer · 2016-08-21 10:05:10Z

0

Please refer to $http documentation. but here is somewhat counterpart for that jquery request

$http({
  method: 'POST',
  url: '/someUrl',
  data: {  
        user: username,
        pass: password 
  },
  headers: {
    'Accept-Language':languageCode
  }
}).then(function successCallback(response) {
    //do something
  }, function errorCallback(response) {
    //do something
  });

answered Aug 21, 2016 at 10:05

miqe

3,3893 gold badges31 silver badges37 bronze badges

3 Comments

Alexander Kozhokar Over a year ago

I tried this kind of request, I get successful response, but data inside it is empty, ( data : " " ). When I add following parameter for jsonp requests: "&callback=JSON_CALLBACK" I get data wrapped in this callback, looks something like: response: {data : "JSON_CALLBACK({here is data I need})", ..}

miqe Over a year ago

ok maybe add this responseType:'json' on the parameter and try it

Alexander Kozhokar Over a year ago

still same result :(

Community · Accepted Answer · 2017-05-23 10:28:40Z

0

AngularJS error .success is not a function

Might have something to do with it??

What API are you working with?

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Aug 21, 2016 at 21:36

Ben Baik

34 bronze badges

Collectives™ on Stack Overflow

jQuery Ajax request turn into AngularJS $http request

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related