angularjs를 사용하여 주어진 입력 위치에 JSON을 게시하는 방법은 무엇입니까?

Question

나는 json을 다음 있습니다 :

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

가 좀 url location에에 post/send이 json 데이터를 싶습니다 (나는 다른 URL locations, 즉 어떤 나는 input 필드에 입력 한 urllocation 다음에 그 url location이 버튼을 클릭하면 post/send이 json 데이터가 필요합니다. 다음을 시도했지만 입력 한 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

당신은 단지 각 $ HTTP 서비스 사용할 필요가

: https://docs.angularjs.org/api/ng/service/ $ HTTP

이미 "($ 범위, $ 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/

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") 
     }); 
    }; 
});