from jquery $.ajax to angular $http

Question

I have this piece of jQuery code that works fine cross origin:

jQuery.ajax({
    url: "http://example.appspot.com/rest/app",
    type: "POST",
    data: JSON.stringify({"foo":"bar"}),
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (response) {
        console.log("success");
    },
    error: function (response) {
        console.log("failed");
    }
});

Now I'm tring to convert this to Angular.js code without any success:

$http({
    url: "http://example.appspot.com/rest/app",
    dataType: "json",
    method: "POST",
    data: JSON.stringify({"foo":"bar"}),
    headers: {
        "Content-Type": "application/json; charset=utf-8"
    }
}).success(function(response){
    $scope.response = response;
}).error(function(error){
    $scope.error = error;
});

Any help appreciated.

Don't know angular.js but maybe faile() is a wrong name of a function? — Bogdan Rybak
– Bogdan Rybak, Commented Aug 26, 2012 at 16:15
found another simular issue stackoverflow.com/questions/11786562/… — Endless
– Endless, Commented Aug 26, 2012 at 16:33
might have found a solution stackoverflow.com/questions/12111936/… need to digg deep... — Endless
– Endless, Commented Aug 26, 2012 at 16:36
OPTIONS request will be issued by a browser, it will be transparent to AngularJS / your application. If the OPTION succeeds the original request (POST/GET/whatever) will follow and your code will be called back for the main request not the OPTION one. — pkozlowski.opensource
– pkozlowski.opensource, Commented Aug 26, 2012 at 16:44
It is probably not Angular changing the request method to OPTIONS. It is probably your browser checking to see if it can do a CORS request. If you are trying to make a call to a separate domain your browser will make an OPTIONS request first to see if it is allowed. — Ian
– Ian, Commented Mar 1, 2013 at 20:41

Sᴀᴍ Onᴇᴌᴀ · Accepted Answer · 2017-07-18 19:29:08Z

202

The AngularJS way of calling $http would look like:

$http({
    url: "http://example.appspot.com/rest/app",
    method: "POST",
    data: {"foo":"bar"}
}).then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
        $scope.data = response.data;
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        $scope.error = response.statusText;
});

or could be written even simpler using shortcut methods:

$http.post("http://example.appspot.com/rest/app", {"foo":"bar"})
.then(successCallback, errorCallback);

There are number of things to notice:

AngularJS version is more concise (especially using .post() method)
AngularJS will take care of converting JS objects into JSON string and setting headers (those are customizable)
Callback functions are named success and error respectively (also please note parameters of each callback) - Deprecated in angular v1.5
use then function instead.
More info of then usage can be found here

The above is just a quick example and some pointers, be sure to check AngularJS documentation for more: http://docs.angularjs.org/api/ng.$http

edited Jul 18, 2017 at 19:29

Sᴀᴍ Onᴇᴌᴀ

8,3028 gold badges38 silver badges61 bronze badges

answered Aug 26, 2012 at 16:40

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

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

5 Comments

Endless Over a year ago

Good to know! however i don't thing its client error i'm dealing with, Angular change the Request method to OPTIONS. think i have to do some server side stuff to support it

pkozlowski.opensource Over a year ago

Yes, I guess you need to sort out server-side problems first. Then you will be able to enjoy full power of angular's $http on the client side. Probably you see an additional OPTIONS request since AngularJS is sending more / different headers as compared to jQuery.

xander27 Over a year ago

NOTE: in get "params:" but not "data:" see stackoverflow.com/questions/13760070/…

pkozlowski.opensource Over a year ago

params and data are 2 different things: params end up in the URL (query string) while data - in request body (only for request types that actually can have body).

Andrew Luhring Over a year ago

"Angular change the Request method to OPTIONS. think i have to do some server side stuff to support it " I'm having the same problem, what does angular add that jquery doesnt?

Vijayaragavan · Accepted Answer · 2016-09-16 14:32:09Z

1

We can implement ajax request by using http service in AngularJs, which helps to read/load data from remote server.

$http service methods are listed below,

 $http.get()
 $http.post()
 $http.delete()
 $http.head()
 $http.jsonp()
 $http.patch()
 $http.put()

One of the Example:

    $http.get("sample.php")
        .success(function(response) {
            $scope.getting = response.data; // response.data is an array
    }).error(){

        // Error callback will trigger
    });

http://www.drtuts.com/ajax-requests-angularjs/

answered Sep 16, 2016 at 14:32

Vijayaragavan

9691 gold badge9 silver badges8 bronze badges

Comments

Tewfik Ghariani · Accepted Answer · 2017-03-30 10:08:49Z

0

You may use this :

Download "angular-post-fix": "^0.1.0"

Then add 'httpPostFix' to your dependencies while declaring the angular module.

Ref : https://github.com/PabloDeGrote/angular-httppostfix

answered Mar 30, 2017 at 10:08

Tewfik Ghariani

3612 silver badges9 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:26:24Z

-5

you can use $.param to assign data :

 $http({
  url: "http://example.appspot.com/rest/app",
  method: "POST",
  data: $.param({"foo":"bar"})
  }).success(function(data, status, headers, config) {
   $scope.data = data;
  }).error(function(data, status, headers, config) {
   $scope.status = status;
 });

look at this : AngularJS + ASP.NET Web API Cross-Domain Issue

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Mar 11, 2014 at 16:31

hanane

641 silver badge9 bronze badges

3 Comments

notbrain Over a year ago

Just a note that $.param is jQuery, so you'll need jQuery loaded to use it. For a jQuery-free example using $http transformRequest interceptor, see pastebin.com/zsn9ASkM

jnm2 Over a year ago

@Brian Wait a minute, isn't jQuery a dependency of AngularJS? You'll never have $http without jQuery first being loaded.

notbrain Over a year ago

@jnm2 - no, jQuery is not a dependency of AngularJS. $http refers to the Angular $http service component, not anything from jQuery. AngularJS does have a "jQuery Lite" available for manipulating the DOM, but it's very limited. From Angular element - If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to Angular's built-in subset of jQuery, called "jQuery lite" or "jqLite."

Collectives™ on Stack Overflow

from jquery $.ajax to angular $http

4 Answers 4

5 Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related