javascript AngularJS 使用 $http.put() 将表单数据发送到服务器时出错
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20808062/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS error sending form data to server with $http.put()
提问by cojok
I have the following controller:
我有以下控制器：
function EditCtrl($scope,$http,$routeParams,$location) {
$scope.master = {};
$scope.actviePath = null;
$http.get("/employeeApp/assets/php/index.php/users/" + $routeParams.id).success(function (data) {
$scope.users = data;
$scope.user = {
name: data.name,
email: data.email,
userName: data.userName,
password: data.password,
role: data.role,
availability: data.availability,
};
});
$scope.update_user = function(user) {
$http.put("/employeeApp/assets/php/index.php/users/"+$routeParams.id, user).success(function(){
$scope.reset();
$scope.activePath = $location.path('/');
});
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
};
}
and the following html template:
以及以下 html 模板：
<div ng-init="$root.title='Add new user'">
<h2>Edit user: </h2>
<form novalidate name="AddNewForm" id="add-new-form" method="post" action="">
<label for="name">Name:</label>
<input type="text" ng-model="user.name" />
<label for="email">Email:</label>
<input type="email" ng-model="user.email" />
<label for="username">Username:</label>
<input type="text" ng-model="user.userName" />
<label for="password">Password:</label>
<input type="password" ng-model="user.password" />
<label for="role">User Role:</label>
<input type="text" ng-model="user.role" />
<label for="availability">Availability: </label>
<input type="text" ng-model="user.availability" />
<!--<input type="hidden" ng-model="user.id" />-->
<br />
<button class="btn btn-primary" id="add-new-btn" ng-click="update_user(user)">Save!</button>
<a href="#/" class="btn">Cancel</a>
</form>
</div>
When I try to edit a user and then save the change the following error appears in console and the form data is not sent to the server:
当我尝试编辑用户然后保存更改时，控制台中会出现以下错误，并且表单数据未发送到服务器：
SyntaxError: Unexpected token S
at Object.parse (native)
at fromJson (angularjs/1.2.6/angular.js:1035:14)
at $HttpProvider.defaults.defaults.transformResponse (angularjs/1.2.6/angular.js:6926:18)
at angularjs/1.2.6/angular.js:6901:12
at Array.forEach (native)
at forEach angularjs/1.2.6/angular.js:302:11)
at transformData angularjs/1.2.6/angular.js:6900:3)
at transformResponse (angularjs/1.2.6/angular.js:7570:17)
at wrappedCallback (angularjs/1.2.6/angular.js:10905:81)
at angularjs/1.2.6/angular.js:10991:26 angular.js:9383
(anonymous function) angular.js:9383
(anonymous function) angular.js:6825
wrappedCallback angular.js:10908
(anonymous function) angular.js:10991
Scope.$eval angular.js:11906
Scope.$digest angular.js:11734
Scope.$apply angular.js:12012
done angular.js:7818
completeRequest angular.js:7991
xhr.onreadystatechange
On server I have a php API made with slim. The link to the server is app/index.php/user/suerId. When I try to output {{user}} it displays data correctly, but I Don't know why I can't sent the data to the server. I am using angularjs 1.2.6. Does anyone knows why this is happening? Thnx in advance!
在服务器上，我有一个用 slim 制作的 php API。到服务器的链接是 app/index.php/user/suerId。当我尝试输出 {{user}} 时，它会正确显示数据，但我不知道为什么我无法将数据发送到服务器。我正在使用 angularjs 1.2.6。有谁知道为什么会这样？提前谢谢！
回答by Joe
Methinks it should be:
我觉得应该是：
$http.put("/employeeApp/assets/php/index.php/users/"+$routeParams.id,
$scope.user)
instead of
代替
$http.put("/employeeApp/assets/php/index.php/users/"+$routeParams.id,
user)
The error you're receiving is angularjs failing to parse userinto JSON. It should have no problem parsing $scope.user.
您收到的错误是 angularjs 无法解析user为 JSON。解析应该没有问题$scope.user。
回答by Sheo Narayan
See here there can be two reasons
看到这里可能有两个原因
The most importantly your server is not accepting HttpPut request, I had the same problem and I was struggling and then I changed the config on the server application that allows HttpPut, HttpDelete request also and then it works like a charm.
Also, you will need to convert your user object into Http form data type by using $.param(user). This is because your server may not understand JSON data directly so it needs to be converted into server understandable format (Http form).
$scope.user = $.param({ name: data.name, email: data.email, userName: data.userName, password: data.password, role: data.role, availability: data.availability, });
最重要的是，你的服务器不接受 HttpPut 请求，我遇到了同样的问题，我很挣扎，然后我更改了服务器应用程序上的配置，允许 HttpPut、HttpDelete 请求，然后它就像一个魅力。
此外，您需要使用 $.param(user) 将您的用户对象转换为 Http 表单数据类型。这是因为您的服务器可能无法直接理解 JSON 数据，因此需要将其转换为服务器可理解的格式（Http 形式）。
$scope.user = $.param({ name: data.name, email: data.email, userName: data.userName, password: data.password, role: data.role, availability: data.availability, });
Notice the $.param above.
注意上面的 $.param 。
See this postwhere it is explained in detailed.
请参阅此帖子，其中详细解释了它。
Hope this helps.
希望这可以帮助。
