Question

我是AngularJS的新手。我使用的是AngularJS 1.3.15版本。当我尝试用PUT方法调用api时，它会生成OPTIONS请求。我不知道我在哪里做错了。我在Stockoverflow中尝试了很多方法，但我仍然没有得到任何东西。请帮我解决这个问题。下面是我的控制器，模型，html文件和Chrome开发者工具网络活动截图。

控制器文件users.js

'use strict';
mmlApp_users.config(['$routeProvider', function($routeProvider){
  $routeProvider
    .when('/users/update/:userId', {
      templateUrl: 'views/users/update.html',
      controller: 'update',
      resolve: {
        user: function(users, $route){
          var userId = $route.current.params.userId
          return users.getUser(userId);
        }
      }
    })
    .otherwise({
      redirectTo: '/users/index'
    });
}]);

模型文件 - users.js

'use strict';
mmlApp_users.factory('users', ['$http', '$location', '$route', function($http, $location, $route){
  var obj = {}; 

  obj.getUser = function(userId){
    return $http.get(serviceBase + 'users/view/'+userId);
  };

  obj.updateUser = function(user){
    var config = {
          headers: {
            'Content-Type': 'application/json'
          }
        };
    var userParams = {
        first_name: user.first_name, 
        last_name: user.last_name, 
        email: user.email, 
        password: user.password,
        address: user.address,
        state: user.state,
        city: user.city,
        zip_code: user.zip_code
      };
    $http.put(serviceBase + 'users/update/'+user.id+'?access-token=8e0bb9b3-b35f-4d30-943d-6028c0b85c13', userParams, config)
          .then(successHandler).catch(errorHandler);

    function successHandler(){
      $location.path('/users/index');
    }
    function errorHandler(){
      alert('Oops! Somthing went wrong.');
      //$location.path('/users/create');
    }
  };

  return obj;
}]);

观看次数 - update.html

<div>
  <h1>{{title}}</h1>
  <p>{{ message}}</p>
  <form role="form" name="myForm">
    <div class="row">
      <div class= "form-group col-md-6" ng-class="{error: myForm.first_name.$invalid}">
        <label> First Name: </label>
        <div>
          <input name="first_name" ng-model="user.first_name" type= "text" class= "form-control" placeholder="First Name" required/>
          <span ng-show="myForm.first_name.$dirty && myForm.first_name.$invalid" class="help-inline">First Name Required</span>
        </div>
      </div>
      <div class= "form-group col-md-6" ng-class="{error: myForm.last_name.$invalid}">
        <label> Last Name: </label>
        <div>
          <input name="last_name" ng-model="user.last_name" type= "text" class= "form-control" placeholder="Last Name" required/>
          <span ng-show="myForm.last_name.$dirty && myForm.last_name.$invalid" class="help-inline">Last Name Required</span>
        </div>
      </div>
    </div>
    ....
    ....
    ....

    <a href="#/users/index" class="btn btn-default">Cancel</a>
    <button ng-click="updateUser(user);" ng-disabled="myForm.$invalid" type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

在Chrome开发者工具网络活动截图中 -

Answer 1

在您的工厂尝试：

(function () {
'use strict';
mmlApp_users.factory('users', ['$http', '$location', '$route','$httpParamSerializer',
function ($http, $location, $route, $httpParamSerializer) {

    var obj = {};

    obj.getUser = function (userId) {
        return $http.get(serviceBase + 'users/view/' + userId);
    };

    obj.updateUser = function (user) {

        var userParams = {
            first_name: user.first_name,
            last_name: user.last_name,
            email: user.email,
            password: user.password,
            address: user.address,
            state: user.state,
            city: user.city,
            zip_code: user.zip_code
        };

        var req = {
            method: 'PUT',
            url: serviceBase + 'users/update/' + user.id + '?access-token=8e0bb9b3-b35f-4d30-943d-6028c0b85c13',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            },
            data: $httpParamSerializer(userParams)
        };

        $http(req)
            .then(successHandler)
            .catch(errorHandler);

        function successHandler() {
            $location.path('/users/index');
        }

        function errorHandler() {
            alert('Oops! Somthing went wrong.');
            //$location.path('/users/create');
        }
    };

    return obj;

}]);

})();

Goog Lock：）

$ http.put请求在AngularJS 1.3.15中更改为OPTIONS请求

1 个答案: