为什么在这个例子中post方法不能在angularjs中工作?

时间:2016-02-04 05:24:27

标签: javascript angularjs angularjs-directive angularjs-scope angularjs-controller

这里我创建了用于读取和更新json文件的示例。读取json文件工作正常,但我尝试更新它显示的无法加载资源的json文件:服务器响应状态为405(方法不允许) 但如果右键单击并检查链接数据是否可用。我不知道我在哪里犯了错误,任何人都可以帮助我......

保存 While Save 数据在该位置可用 Data Available

file.json   
    [    
        {"name":"English","value":true},
        {"name":"Spanish","value":false},
        {"name":"German", "value":false},
        {"name":"Russian","value":false},
        {"name":"Korean", "value":false}
    ]

// Code goes here

var app = angular.module('myApp', []);


app.service('JSONService', function($http){         
    return{
        getJSON: function(){
            return $http.get('file.json')
                .then(function(response){
                    return response.data;
                });
        }
    };
 });

app.controller('myCtrl',['$scope', 'JSONService','$http', function( $scope, JSONService, $http) {
  JSONService.getJSON().then(function(data){
       $scope.languages = data;
  });

//inputting json directly for this example
// $scope.languages = [        
//    {name:"English", value:true},
//    {name:"Spanish", value:false},
//    {name:"German", value:false},
//    {name:"Russian", value:false},
//    {name:"Korean", value:false}
//  ];

  $scope.save = function() {
 //   $http.post('file.json', $scope.languages).then(function(data) {
 //     $scope.msg = 'Data saved';
 //   });
    
$http({                
    url: 'file.json',
    method: "POST",
    data:$scope.languages,
    headers: {
        'Content-Type': 'application/json', 
        'Accept': 'application/json' 
    }
});

  };
}]);
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  
<body ng-app="myApp" ng-controller="myCtrl">
  <form>
    <div ng-repeat="lang in languages">
      <label>{{lang.name}}</label>
      <input type="checkbox" min="0" max="4" ng-model="lang.value" >
    </div>
    <button ng-click="save()">Save</button>
    <p>{{msg}}</p>
</form>
</body>

</html>

3 个答案:

答案 0 :(得分:0)

尝试这种方式:

$http.post(site_url+'admin/addAdmin/',{
                        'vName'     : admin.vName,
                        'vEmail'     : admin.vEmail,
                        'vPassword'    : admin.vPass
                     }).success(function (data, status, headers, config) {
                             //success
                     })
                     .error(function (evt) {
                            //error
                     });

答案 1 :(得分:0)

如果您没有使用服务器并直接调用.json文件,那么它应该只作为GET方法调用。默认情况下使用HTTP GET方法检索所有文件。

由于它是纯JSON文件,并且不通过服务器或任何服务器端代码提供服务,因此除了GET之外,它将无法处理其他HTTP方法,如POST,DELETE等。

您想将此帖子数据保存到.json文件吗?如果这是您的意图,那么使用$ HTTP无法完成此操作,您将需要在服务器端处理此问题

答案 2 :(得分:0)

除了后端服务器之外,您不能POST。浏览器能够GET file.json资源,因为它能够简单地从已知位置读取文件。浏览器无法直接写入文件(通常不包括使用file api的特定于Chrome的沙盒),并且需要服务器端元素来处理POST请求,然后保存数据。