Angularjs Http Post Method

Angularjs Http Post Method : Angularjs Http Post is used to perform post request. It posts data using post method. This method is preferred when you are working with the data which is more secure or you are sending large data. We are going to explain post method with the example and demo.

Angularjs Http Post Method Syntax | Config | Example | Demo

Syntax for Post method –

$http.post(url, data, [config]).then(Callback);

Parameters

• url : Thet Url from where you want to load data.
• data : data you want to post.
• config(optional): This is optional configuration object .
• Callback : Callback function after success. Returns object.

Returns

• Returns : HttpPromise Object.

Angularjs Http Post Method : Php File

Here we are using php at server side to save data. We will post data on the postUsers.php file and save it in table.

$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
$name = addslashes($request->name);
$email = addslashes($request->email);
$phone = addslashes($request->phone);
$message = '';
if(!empty($name)&& !empty($email)){
$query = mysql_query("insert into test_user (name,email,phone)values('$name','$email','$phone')");
}

Here is an example of post method in which we are posting posting data using post method. To see the output of the example click on “try it” button –

    



<div ng-controller="registerController">

             <table>
    <tr><th>Id</th><th>Name</th><th>Email</th><th>Phone</th></tr>
  <tr><td colspan="4" class="amp-wp-inline-32142e30a43373eadd2a7a93647b538c">{{message}}</td></tr>
    <tr ng-repeat="data in usersData">
    <td>{{data.id}}</td>
    <td>{{data.name}}</td>
   <td>{{data.email}}</td>
  <td>{{data.phone}}</td>
    </tr>
    </table>
</div>

The above example will produce the following output of the form to view full functionality click on “Try it” button and fill form and submit to post and see result –

Angularjs $http post multiple parameters –

If you want to send the multiple parameters using $http post method you can pass multiple parameters as below –

$http.post("url",{'param1': value1,'param2': value2,'param3': value3,'param4': value4})

Headers

The $http service automatically adds some HTTP headers to each requests. You can configure the default headers by accessing the $httpProvider.defaults.headers configuration object. $httpProvider.defaults.headers contains the current header configuration.

• $httpProvider.defaults.headers.common (Common Headers for all requests):

  Accept: application/json, text/plain, * / *
• 
  $httpProvider.defaults.headers.post: ( Default Headers for POST requests)

  Content-Type: application/json
• 
  $httpProvider.defaults.headers.put (Default Headers for PUT requests)

  Content-Type: application/json
  

You can add or overwrite the defaults simply adding a new object with the lowercase HTTP method name as the key, e.g. $httpProvider.defaults.headers.get = { ‘Test-Header’ : ‘value’ }.

Angularjs http post set Header-

You can set content type header in angularjs $http post method simply as below –

Angularjs Set http post content type json-

Angularjs Set http post content type json Example :

var req = { method: 'POST', url: 'http://tutorialsplane.com/runtest/json/registerUsers.php', headers: { 'Content-Type': 'application/json' }, data: {'name': $scope.name,'email': $scope.email,'phone': $scope.phone} } $http(req).success(function(response) {$scope.usersData = response.users;$scope.message = response.message;});

Try Video Demo – All In One Video for this method –

AngularJs Http Post Method Video Demo –