Here we will learn what is http post method ($http.post) in angularjs, uses of $http.post method in angularjs and how to use post method ($http.post()) with parameters in angularjs with example.
In angularjs we use $http service to send or get data from remote http servers using browsers XMLHttpRequest object.
The $http.POST() services are used to send the data to a specific URL and expects the resource at that URL to handle the request that means we can say that POST method is used to Insert new data based on given URL and it is one of the shortcut method in $http service.
Following is the syntax of using $http.post method in angularjs applications.
var app = angular.module('putserviceApp', []);
app.controller('putserviceCtrl', function ($scope, $http) {
// Simple Post request example:
var url = 'posturl', data = 'parameters',config='contenttype';
$http.post(url, data, config).then(function (response) {
// This function handles success
}, function (response) {
// this function handles error
});
});
If you observe syntax of angularjs $http.post method we have different properties like url, data, config and then success and error functions. We will learn each property in detail.
Property | Description |
---|---|
url | We need to send url of http server to perform required operations. |
data | We will use this property to send required parameters to requested url. |
config | By using this property we can change content-type. |
In above syntax, we passed $http as argument to the controller. To use service in controller we need to pass $http as parameter.
The response object which we will get after execution of $http.post method has following properties
We will see how to use $http.post service in angularjs with example.
Following is the example of using angularjs $http.post service in application.
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs $http.post() Service Response Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('postserviceApp', []);
app.controller('postserviceCtrl', function ($scope, $http) {
$scope.name = null;
$scope.age = null;
$scope.adress = null;
$scope.lblMsg = null;
$scope.postdata = function (name, age, adress) {
var data = {
name: name,
age: age,
adress: adress
};
//Call the services
$http.post('/api/users/post', JSON.stringify(data)).then(function (response) {
if (response.data)
$scope.msg = "Post Data Submitted Successfully!";
}, function (response) {
$scope.msg = "Service not Exists";
$scope.statusval = response.status;
$scope.statustext = response.statusText;
$scope.headers = response.headers();
});
};
});
</script>
</head>
<body>
<div ng-app="postserviceApp" ng-controller="postserviceCtrl">
<div>
Name : <input ng-model="name" /><br/><br/>
Age : <input ng-model="age" /><br/><br/>
Adress : <input ng-model="adress" /><br/><br/>
<input type="button" value="Send" ng-click="postdata(name, age, adress)" /> <br/><br/>
</div>
<p>Output Message : {{msg}}</p>
<p>StatusCode: {{statusval}}</p>
<p>Status: {{statustext}}</p>
<p>Response Headers: {{headers}}</p>
</div>
</body>
</html>
Now we will run and see the output of above angularjs $http.post method that would be like as shown following.
Following is the result of using $http.post service in angularjs application.
If you observe above output we got message like "Service not Exists" that means the url which we defined in angularjs $http.post() method not exists that's why it's showing error message. In case if service exists with that url it will execute and will show message like "Post Data Submitted Successfully".
This is how we can angularjs $http.post method to send or insert data in remote http servers.