如何使用 angularjs post 将 JSON 到给定的输入位置？

Question

我有以下 json:

var jsondata = {
"id": 1,
"name": "Test Name",
"price": 100,
"city": "XYZ"
};

我想 post/send 这个 json 数据到一些 url location（我有不同的 URL locations，即 url location 我输入 input 字段，然后 url location 我需要 post/send 这个 json 数据）点击 Send按钮。我尝试了以下方法，但无法发送到给定的输入 url。

var app = angular.module('myApp', []);
app.controller('TestCtrl',function($scope, $http) {
$scope.sendToLocation = function(){
var jsondata = {
"id": 1,
"name": "Test Name",
"price": 100,
"city": "XYZ"
};

 $.ajax({
 type: 'POST',
 contentType: 'application/json; charset=utf-8',
 dataType: 'json',
 url: 'My URL HERE',
 data: JSON.stringify(jsondata),
 success: function(data) {
 alert("yes, you have posted the data !");
 }
 });
 //alert(JSON.stringify(jsondata));//gives the above json
 };

});

<script src="https://code.angularjs.org/1.5.8/angular.js"></script>

<div ng-controller="TestCtrl">  
<br>
<input type="url" maxlength="50" size="50" ng-model="sendToLocation.url"><br><br>
 <button id="sendbutton" type="button" ng-click="sendToLocation()" >Send</button>  
</div>

已创建 Fiddle。

请让我知道我做错了什么以及如何发送 json。提前致谢！

Answer 1

您只需要使用 angular$http 服务：https://docs.angularjs.org/api/ng/service/$http

您已经将其注入控制器，即 "function ($scope, $http)"

这是与您的fiddle有关的代码。

var app = angular.module('myApp', []);
app.controller('TestCtrl', function($scope, $http) {
  $scope.sendToLocation = function() {
    var jsondata = {
      "id": 1,
      "name": "Test Name",
      "price": 100,
      "city": "XYZ"
    };

    $http.post($scope.sendToLocation.url, jsondata, {}).then(
      function(response) {
        alert("yes, you have posted the data !");
      },
      function(error) {

      });
    //alert(JSON.stringify(jsondata));//gives the above json
  };

});

<script src="https://code.angularjs.org/1.5.8/angular.js"></script>

<div ng-controller="TestCtrl">
  <br>
  <input type="url" maxlength="50" size="50" ng-model="sendToLocation.url">
  <br>
  <br>
  <button id="sendbutton" type="button" ng-click="sendToLocation()">Send</button>
</div>

这里是 fiddle：https://jsfiddle.net/ltfleming/tu2829ef/10/

Answer 2

angular.module('myApp', []);

您可以使用 $http 提供程序进行 http 调用，并且可以像示例中那样传递数据。

angular
.module('app')
.controller('ctrl', function ($scope, $http) {
    $scope.sendToLocation = function () {

        var jsondata = {
            "id": 1,
            "name": "Test Name",
            "price": 100,
            "city": "XYZ"
        };

        $http({
            method: 'POST',
            url: 'My URL HERE',
            headers: {
                "Content-Type": "'application/json; charset=utf-8",
            },
            data: jsondata ,

        }).then(function(result) {
             alert("yes, you have posted the data !");
        }, function(error) {
            alert("failed")
        });
    };
});

如何使用 angularjs post 将 JSON 到给定的输入位置？

How to post the JSON to the given input location using angularjs?

ajax

jquery

json

angularjs

angular-ngmodel