How to send POST in angularjs with multiple params?
Client Side
Data needs to be grouped in an object array as payload - Indata
:
var Indata = {'product': $scope.product, 'product2': $scope.product2 };
Pass the payload through $http.post
as the second argument:
$http.post("http://localhost:53263/api/Products/", Indata).then(function (data, status, headers, config) {
alert("success");
},function (data, status, headers, config) {
alert("error");
});
Server Side
Create a Data Transfer Object(DTO) class as such:
public class ExampleRequest {
public string product {get; set;};
public string product2 {get; set;};
}
The class below accepts DTO with the same property names which the payload is carrying.
public void Post(ExampleRequest request)
{
var productRepository = new ProductRepository();
var newProduct = productRepository.Save(request.product);
}
In above class, request
contains 2 properties with values of product
and product2
Consider a post url with parameters user and email
params object will be
var data = {user:'john', email:'[email protected]'};
$http({
url: "login.php",
method: "POST",
params: data
})
It depends on what is your backend technology. If your backend technology accepting JSON data. data:{id:1,name:'name',...}
otherwise, you need to convert your data best way to do that creating Factory to convert your data to id=1&name=name&...
then on $http define content-type. you can find full article @https://www.bennadel.com/blog/2615-posting-form-data-with-http-in-angularjs.htm
$http({
method: 'POST',
url: url,
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("&");
},
data: {username: $scope.userName, password: $scope.password}
}).success(function () {});
ref:How do I POST urlencoded form data with $http in AngularJS?
!important about encodeURIComponent(obj[p]) will transfer object the way implicit. like a date value will be converted to a string like=>'Fri Feb 03 2017 09:56:57 GMT-0700 (US Mountain Standard Time)' which I don't have any clue how you can parse it at least in back-end C# code. (I mean code that doesn't need more than 2-line) you can use (angular.isDate, value.toJSON) in date case to convert it to more meaningful format for your back-end code.
I'm using this function to comunicating to my backend webservices...
this.SendUpdateRequest = (url, data) => {
return $http({
method: 'POST',
url: url,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
transformRequest: function (obj) { return jsontoqs(obj); },
data: { jsonstring: JSON.stringify(data) }
});
};
and bellow code to use it...
webrequest.SendUpdateRequest(
'/Services/ServeicNameWebService.asmx/Update',
$scope.updatedto)
.then(
(res) => { /*/TODO/*/ },
(err) => { /*/TODO/*/ }
);
in backend C# I'm using newtonsoft for deserializing the data.