AngularJS $http.post method example

Write code here

J | B | A

<!DOCTYPE html>
<html>
	<head>
		<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

</head>
<body>
<h3 style="color:red;">This demo may not work as corresponding ASP.NET MVC controller action method doesn't exists where the POST request is being sent on the server.</h3><hr />
<script>
    var app = angular.module("app", []);
    app.controller("HttpGetController", function ($scope, $http) {

$scope.SendData = function () {
           // use $.param jQuery function to serialize data from JSON 
            var data = $.param({
                fName: $scope.firstName,
                lName: $scope.lastName
            });
        
            var config = {
                headers : {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
                }
            }

$http.post('/ServerRequest/PostDataResponse', data, config)
            .success(function (data, status, headers, config) {
                $scope.PostDataResponse = data;
            })
            .error(function (data, status, header, config) {
                $scope.ResponseDetails = "Data: " + data +
                    "<hr />status: " + status +
                    "<hr />headers: " + header +
                    "<hr />config: " + config;
            });
        };

});
</script>
<div ng-app="app" ng-controller="HttpGetController">
    <p>First Name: <input type="text" name="firstName" ng-model="firstName" required /></p>
    <p>First Name: <input type="text" name="lastName" ng-model="lastName" required /></p>
    <button ng-click="SendData()">Submit</button>
    <hr />
    {{ PostDataResponse }}
</div>
</body>
</html>

Note: We DO NOT save your trial code in our database.

AngularJS > $Http.Post Method Example

Write code here

Output