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 –
Angularjs $http.post Syntax:
$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.
Angularjs $http.post Example :
$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 –
Angularjs $http.post example with parameters | JSON
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="registerController">
<form action="javascript:void(0);">
<h2>Register Form</h2>
<div>
<label>Name</label>
<input type="text" ng-model="name" placeholder="Name" required="required" style='margin-left: 10px;'>
</div>
<div>
<label>Email</label>
<input type="text" ng-model="email" placeholder="Email" required="required" email="email" style='margin-left: 10px;'>
</div>
<div>
<label>Phone</label>
<input type="phone" ng-model="phone" placeholder="Phone">
</div>
<button ng-click='Register()' style='margin-top:15px'>Register</button>
</form>
<table>
<tr><th>Id</th><th>Name</th><th>Email</th><th>Phone</th></tr>
<tr><td colspan="4" style="font-size:10px;color:green;">{{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>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('registerController', function($scope, $http) {
$scope.Register = function() {
$http.post("http://runtest.tutorialsplane.com/json/registerUsers.php",{'name': $scope.name,'email': $scope.email,'phone': $scope.phone})
.success(function(response) {$scope.usersData = response.users;$scope.message = response.message;});
};
});
</script>
</body>
</html>
|
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 Method Example
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})
More About $http Post Method
Let’s have look over more about $http post method.
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 –
Advertisements
