Problems using $http POST

Question

I am new in angular.js and I need to make form with 2 fields for numbers and when I click on submit i need to send to server with json for request result of suma. It will look like: 4 in first field , 4 in second field and on submit it will return result 8.

Thanks guys. Here is code:

<div ng-app="app" ng-controller="HttpGetController">
    <p>Num1 
        <input type="number" name="num1" ng-model="num1" required />
    </p> 
    <p>Num2: 
        <input type="number" name="num2" ng-model="num2" required />
    </p> 
    <button ng-click="SendData()">Saberi</button> <hr /> 
         {{ PostDataResponse }}
 </div>

JS

var app = angular.module("app", []);
app.controller("HttpGetController", function ($scope, $http) {
    $scope.SendData = function () { 
        var data = $.param({ num1: $scope.num1, num2: $scope.num2 });
        var config = { headers : { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;' } }

        $http.post('localhost:3000', data, config) 
             .success(function (data, status, headers, config) {
                  $scope.PostDataResponse = data;
        })
     }
});

Please show what you have tried and how your bindings are set on the form controls. Also there are lots of tutorials available regarding forms — charlietfl, Mar 01 '16 at 00:12
Like @charlietfl show us what you have tried.. see mcve: http://stackoverflow.com/help/mcve — amanuel2, Mar 01 '16 at 00:22
AngularJS normally uses `content-type, 'application/json'`. Otherwise look at [URL-encoding variables using only AngularJS services](http://stackoverflow.com/a/30970229/5535245). — georgeawg, Mar 04 '16 at 08:08
Example with JSON [DEMO on JSFiddle](https://jsfiddle.net/h80vq6wq/) — georgeawg, Mar 04 '16 at 09:00
@georgeawg work with you example! Thank you, and thank you all guys! — Sasa Geric, Mar 08 '16 at 22:26

score 0 · Answer 1 · answered Mar 01 '16 at 04:16

0

Get the input values and that will be automatically bind to scope. In your controller, just add those two operands.

$scope.sum = $scope.op1 + $scope.opt2;

then post the $scope.sum to server using $http.post() or thru $resource service.

answered Mar 01 '16 at 04:16

Vinay

548
2
12

Thanks guys. Here is code: `

Num1

Num2:

{{ PostDataResponse }}
` – Sasa Geric Mar 02 '16 at 18:47
` var app = angular.module("app", []); app.controller("HttpGetController", function ($scope, $http) { $scope.SendData = function () { var data = $.param({ num1: $scope.num1, num2: $scope.num2 }); var config = { headers : { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;' } } ` – Sasa Geric Mar 02 '16 at 18:58
And the lest part : ` $http.post('localhost:3000', data, config) .success(function (data, status, headers, config) { $scope.PostDataResponse = data; })` – Sasa Geric Mar 02 '16 at 18:59

score 0 · Answer 2 · answered Mar 08 '16 at 22:35

$http POST with JSON Data Example

app.controller("HttpGetController", function ($scope, $http) {
    $scope.SendData = function () { 

        var data = { num1: $scope.num1, num2: $scope.num2 };

        $http.post('https://httpbin.org/post', data) 
            .then(function (response) {
                  $scope.PostDataResponse = response.data.data;
        })
     }
});

The DEMO on PLNKR

Problems using $http POST

2 Answers2

$http POST with JSON Data Example