Angular $http is not sending data - angularjs

I know it has been solved here many times, but I'm still not able to get it working.
My js call is:
var data = { value: 7 };
$http.post('api/controller/method', data);
But in fiddler there is no Content-Type and no JSON data.
I want the Content-Type to be 'application/json' which should be default, right?
Thanks

var data = { value: 7 };
$http({
url: "api/controller/method",
method: "POST",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: $.param(data)
}).success(function(data, status, headers, config) {
//some code when success post
}).error(function(data, status, headers, config) {
//some code when error post
});

Try this:
var response = $http.post('api/controller/method', data);
response.success(function(data, status1, headers, config) {
//
}

Related

Angular is waiting anoher request to start

In my App I need to do a request to save some data (this request is little slow) but the user can do another request in same time, when he did this, angular was waiting for the first request (not assync). How Can I do two requests whithout waiting for other?
My slow service:
app.service('PedSaveService',["$http", "$q","BASEURL",
function ($http, $q,BASEURL) {
var self = this;
self.Save = function (pedidoData) {
var deferred = $q.defer();
$http({method: 'POST',async: true, url: BASEURL.REST_SAVE, headers: {'Content-Type': 'application/json;charset=utf-8'}, data : pedidoData})
.success(function (response, status, headers, config) {
deferred.resolve(response, status, headers, config);
})
.error(function (response, status, headers, config) {
deferred.reject(response, status, headers, config);
});
return deferred.promise;
}
self.Save = function(pedidoData) {
$http({
method: 'POST',
async: true,
url: BASEURL.REST_SAVE,
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
data: pedidoData
}).then(function(res) {
return res;
}); }
Your code in service should be this.

While consuming web api in angularjs returns 404 error

This is my code
$http.jsonp("http://admin.mlbmcjhs.com/api/Department?&callback=JSON_CALLBACK").success(function (data, status) {
$scope.Departments = data;
alert(data);
}).error(function (data,status) {
alert(status);
});
web api is working fine in browser console
and returning data
but in angularjs it jumps to error() and returning 404
You might be getting a CORS error. I've tested from Plunker (http://plnkr.co/edit/q3DVia?p=info)
var url = "http://admin.mlbmcjhs.com/api/Department?&callback=JSON_CALLBACK";
$http({
url: url,
method: "GET",
headers: {
'Content-Type': 'application/JSON'
},
}).success(function(response, status, headers, config, statusText) {
vm.Departments = data;
vm.status = status;
vm.headers = headers();
}).error(function(response, status, headers, config, statusText) {
vm.status = status;
vm.headers = headers();
});
, and I get a CORS error. You will probably need to enable CORS on your webApi.

store response header value during angular http post

I am making an angular http post to an API which like this
$http({
method: 'POST',
url: 'http://api/ClientEndpoint',
data: register,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
transformRequest: function (obj) {
var str = [];
for (var p in obj)
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
return str.join("&");
}
}).error(function (data, status, headers, config) {
alert(data);
});
which is returning the following response
But I am not able to store the response path in a variable. How can I do that?
It is cross domain scenario and this is the response being showed in chrome console
I want to access store the ClientEndpoint value
Did you forget the .success(function (data) { }) callback ? just like the .error() you put after the http() function
i hope this will solve your problem ;)
Use the headers variable in either your .succes(response, headers) or .error(response, headers).
E.g :
.success(function(data, status, headers, config) {
//Success Handling
});
.error(function(data, status, headers, config) {
//Error Handeling
});
This only works if you are on the same domain as the server, if it's cross domain, the server has to send the Access-Control-Expose-Headers for you to make this work.

Why variable is not decremented?

In Angular JS controller there is variable:
$scope.currentCount = {
'subscribers' : 0
}
Also in HTML template:
<span>{{currentCount.subscribers}}</span>
When I call method in this controller, this variable is not decremented in template, why?
$scope.saveSubscriber = function (type, name) {
$scope.saveSubObj.type = type;
$http({
url: "/subscribe",
method: "POST",
data: $.param($scope.saveSubObj),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(data, status, headers, config) {
$scope.currentCount.subscribers--;
}).error(function(data, status, headers, config) {
//TODO
});
}
Look at success AJAX response:
$scope.currentCount.subscribers--;
Are you sure it fired the success method? I just checked and got the correct result in my local testing.
Could you please put $scope.currentCount.subscribers--; inside the $http error() method as well? Let's check then whether it decreases or not.

AngularJS a service is not a function

This current code when ran returns TypeError: Services.updateUserData.set is not a function
Controller
Services.updateUserData.set($rootScope.user);
Services.js
this.updateUserData = function() {
return {
set: function(data) {
console.log(data);
$http({
method: 'POST',
url: 'api/data/',
data: {'data': data},
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
}).success(function(data, status, headers, config) {
console.log(data);
}).error(function(data, status, headers, config) {
console.log(data);
});
}
}
}
The code below works but I would much rather have a get and set function within updateUserData so that I am not duplicating work.
Current Code
Controller
Services.updateUserData($rootScope.user);
Services.js
this.updateUserData = function() {
console.log(data);
$http({
method: 'POST',
url: 'api/data/',
data: {'data': data},
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
}).success(function(data, status, headers, config) {
console.log(data);
}).error(function(data, status, headers, config) {
console.log(data);
});
}
updateUserData is a function and hence there is no property called set. The option is either convert it to object
this.updateUserData={set:function(){}}
or invoke it
Services.updateUserData().set($rootScope.user);
before accessing set

Resources