如何使用 angularjs 将 JSON 发布到给定的输入位置？答案

【问题标题】：How to post the JSON to the given input location using angularjs?如何使用 angularjs 将 JSON 发布到给定的输入位置？
【发布时间】：2017-03-08 08:33:36
【问题描述】：

我有以下json：

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

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

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。提前致谢！

【问题讨论】：

标签： jquery angularjs json ajax angular-ngmodel

【解决方案1】：

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

您已经将它注入到控制器中，即“function ($scope, $http)”

这是与您的小提琴相关的代码。

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>

这是一个小提琴：https://jsfiddle.net/ltfleming/tu2829ef/10/

【讨论】：

感谢您的回复，是的，一切正常！感谢您的帮助！
我还有一个解决方案：$scope.raw_url;来自刚才的帖子：stackoverflow.com/questions/31962868/…

【解决方案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")
        });
    };
});

【讨论】：