AngularJS Http Post Method ($http.post) with Parameters Example

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.

AngularJS Http Post ($http.post()) service

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.

Syntax of AngularJS $http.post Method

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.

 

PropertyDescription
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

 

  1. config  - The configuration object is used to generate the request.
  2. data - It’s either string or an object.
  3. headers - We can get header information.
  4. status - We can get HTTP status code of the response.
  5. statusText - Get HTTP status text of the response.

We will see how to use $http.post service in angularjs with example.

Example of AngularJS $http.post() Service 

Following is the example of using angularjs $http.post service in application.

 

Live Preview

<!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.

Output of AngularJS $http.post Service Example

Following is the result of using $http.post service in angularjs application.

 

Angularjs $http post service example result or output

 

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.