userServic不会将数据传递给后端：无法读取的未定义的属性'协议' - AngularJS [英] userServic won't pass data to back-end: Cannot read property 'protocol' of undefined - AngularJS

问题描述

我有我的用户控制面板更改密码功能不工作。它挑选的最多值在输入和控制器的服务并将它们传递，服务接收他们，但是当他treys打后端与他们调试控制台的回报：无法读取属性未定义的协议。

I have a Change Password feature on my User Control Panel that is not working. It pick's up values from input and passes them from controller to service, service receives them but when he treys to hit back-end with them the debug console returns: Cannot read property 'protocol' of undefined.

重要：
请参考我的previews问题<一href=\"http://stackoverflow.com/questions/25530564/scope-doesnt-picks-up-string-from-form-input-angularjs-js\">here你写你的解决方案，以了解为什么我必须使用一个对象的领域范围，输入之前。普莱斯认为发送整个对象到后端是不是一种选择，谢谢你。

Important: Please refer to my previews question here before you write your solution to understand why I have to use fields of an object to scope input. Pleas consider that sending whole object to backend is not an option, thank you.

表（html的）：

<accordion-group heading="Change password" is-open="changePasswordStatus.open" style="cursor: pointer">
    <div>
        <div>
            <form class="form-horizontal" role="form">
                <form-row model="password.newPassword" name="New: " size="col-sm-8"></form-row>
                <form-row model="password.repeatedNewPassword" name="Repeat: " size="col-sm-8"></form-row>
                <form-row model="password.currentPassword" name="Current: " size="col-sm-8"></form-row>
                <br>
            </form>
        </div>
        <div>
            <button class="btn btn-default btn-sm" data-ng-click="changePassword()">Save</button>
            <button class="btn btn-warning btn-sm" ng-click="changePasswordStatus.open = !changePasswordStatus.open">Cancel</button>
        </div>
    </div>
</accordion-group>

userController.js：

userController.js:

collectionsApp.controller('userController', function($scope, userService, $timeout, $state) {
    $scope.password = {
        newPassword : "",
        repeatedNewPassword : "",
        currentPassword : ""
    }

    $scope.init = function() {
        userService.getCurrentUser(getCurrentUser);
    }

    $scope.changePassword = function() {
        if ($scope.password.newPassword === $scope.password.repeatedNewPassword) {
            userService.changePassword($scope.password.newPassword, $scope.password.currentPassword);
    }
}

...

userService.js：

userService.js:

collectionsApp.service('userService', function($http) {
    return {
        changePassword : function(newPassword, currentPassword) {
            $http.post('/user/changePassword', newPassword, currentPassword);
        }

    };
});

调试：

错误控制台：

推荐答案

我设法解决这个问题。有三种解决方案。在后端我有一个配置为接受POST方法@RequestBody Java的控制器。首先，它是配置了两个字符串，但因为它发生角的$ HTTP POST是意在接受三PARMS - （如@RémiB指出）1.网址，2.数据3.配置对象。因此，合理的解决方案是发送对象，并接受它像对象数据的通用对象但这对象没有getter和setter所以这是不可能的提取数据。绝对不可以接受的解决方案是创建一个专为这类数据的getter和setter工具类。少不能接受的解决方案是新的申请（NEWPASSWORD到现有类用户）加那么这个类接收到的数据可以被处理。三 - 可疑的解决办法是接收数据作为通用Object对象，做一个toString（）OND此对象，写一个code从字符串中提取子。这听起来真的错了，我不希望这样做。最后的解决办法是不可接受的最小：改变方法来获得和URL发送数据（角服务）和反应作为通过在Java后端@PathVariables字符串。所以，长话短说：

I have managed to solve this problem. There were three solutions. In back-end I have Java controller that was configured to accept @RequestBody with POST method. First it was configured for two strings but as it happens Angular's $http post is is meant to receive three parms - 1. url, 2.data, 3. config object (as @RémiB. pointed out). So logical solution was to send object, and to receive it as an generic object like Object data but this object has no getters and setters so it was not possible to extract data. Absolutely Not acceptable solution was to create utility class with getters and setters designed for this kind of data. Less not acceptable solution was to add new filed (newPassword to existing class User) so data received with this class could be processed. Third - dubious solution was to receive data as generic Object object and do a toString() ond this object and write a code for extracting substrings from string. This sounded really wrong and I did not wanted to do that. Last solution was least unacceptable: to change methods to GET and send data in url (from Angular service) and reactive it as string via @PathVariables in Java backend. So, long story short:

changePassword : function(newPassword, currentPassword) {
    $http.get('/user/changePassword/'+newPassword+'/'+currentPassword);
}

而在后端：

@RequestMapping(value = "/changePassword/{newPassword}/{currentPassword}", method = RequestMethod.GET)
    public HashMap<String, String> changePassword(@PathVariable("newPassword") String newPassword, @PathVariable("currentPassword") String currentPassword) {  
....
}

这篇关于userServic不会将数据传递给后端：无法读取的未定义的属性'协议' - AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！