POST works using JQuery but not Angularjs

Question

Can anyone please help me find out why this piece of code works fine:

       $.ajax({
                type: "POST",
                url: scope.serviceBase + "/api/Property/PostAsync",
                contentType: "application/x-www-form-urlencoded",
                processData: false,
                data: data,
                success: function (response) {
                    alert(response);
                },
                error: function (response) {
                    alert(response);
                }
            });

While exact same thing just using Angularjs fails:

      $http({
                method: "POST",
                url: scope.serviceBase + 'api/Property/PostAsync',
                headers: {
                    'processData':false,
                    'Content-Type': "application/x-www-form-urlencoded"
                },
                data: data
            }).success(function (response) {
                alert(response);
            }).error(function (response) {
                alert(response);
            });

FYI, the error that I get using the AngularJs format is a 400 bad request.

I don't think ProcessData exist in AngularJS. If the purpose of processData is to transform the data to post or to get, it is called transfromRequest and transformResponse. Those are not inside the headers — gr3g
– gr3g, Commented Aug 16, 2015 at 9:36

blas3nik · Accepted Answer · 2015-09-24 12:21:00Z

First off, processData is not a header, and it does not exist in Angular (yet) as it exists in jQuery. It has a transformRequest property for $http though, that accepts an array of functions that will be executed on the data property before sending the request. In order to tell Angular not to touch your data, you can simply set that configuration to an empty array. So in your case it should be something like

$http({
           method: "POST",
           url: scope.serviceBase + 'api/Property/PostAsync',
           headers: {
                       'Content-Type': "application/x-www-form-urlencoded"
                    },
           data: data,
           transformRequest: []
           }).success(function (response) {
               alert(response);
           }).error(function (response) {
               alert(response);
           });

Tarun Dugar · Accepted Answer · 2015-08-16 06:28:57Z

0

Try:

$http.post(scope.serviceBase + 'api/Property/PostAsync', data).success(function(response) {
    alert(response);
})
.error(function(response) {
    alert(response);
})

In my opinion, I think post requests are a little syntactically different from jQuery. The above code is what I use with Angular. For more configuration options refer this

edited Aug 16, 2015 at 6:28

answered Aug 16, 2015 at 4:13

Tarun Dugar

8,9938 gold badges50 silver badges81 bronze badges

1 Comment

Bahman_Aries Over a year ago

Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this". We make an effort here to be a resource for knowledge.

Collectives™ on Stack Overflow

POST works using JQuery but not Angularjs

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related