使用$ http.post将Angularjs表单提交到SpringMVC Controller

时间:2017-03-29 08:01:27

标签: angularjs ajax jsp spring-mvc

如何从jsp向Springmvc控制器发送多个数据以更改密码。 我想使用angular js更改密码。 怎么解决这个问题?

警报消息正确显示但无法使用post方法调用控制器。

我的js代码

myangu.controller('account', function($scope, $http) {

    var submitvalue = $scope.detailspassword = function() {

        alert($scope.confirmpassword + "" + $scope.newpassword + ""
                + $scope.existedpassword);

    };
    var submitvalue = function(request) {

    };
    var error = function(reason) {
        alert("failure message: " + JSON.stringify({
            reason : reason
        }));

        $scope.errormessage = "Something Wrong.Cannot Change Your Password";

    };

    $http.post('/java/updatepassword').then(submitvalue, error);

});

SpringMvc控制器

@RequestMapping(value = "/updatepassword", method = RequestMethod.POST,produces="application/json")
    public @ResponseBody String updatepassword(@RequestBody Users users) throws JSONException,NullPointerException,JsonGenerationException{

        System.out.println("Updatedpassword"+users.getPassword());


        return uservice.updatepassword(users);
    }

Jsp页面

<div class="divTablebody">
    <div  ng-controller="account">
        <%-- <form:form action="/java/changepassword"  method="POST" > --%>
        <div>{{errormessage}}</div>
        <div class="divTableRow">


            <div class="divTableCell">Existed password:</div>
            <div class="divTableCell">
                <input type="password" placeholder="Existed Password"
                    id="Existedpw" ng-model="existedpassword">
            </div>
        </div>
        <div class="divTableRow">
            <div class="divTableCell">New password:</div>
            <div class="divTableCell">
                <input type="password" placeholder="New Password" id="newpw"
                    ng-model="newpassword">
            </div>
        </div>
        <div class="divTableRow">
            <div class="divTableCell">Password Confirmation:</div>
            <div class="divTableCell">
                <input type="password" placeholder="Confirm Password "
                    id="confirmpw" ng-model="confirmpassword">
            </div>
        </div>
        <div class="divTableRow">
            <div class="divTableCell">Save</div>
            <div class="divTableCell">
                <input type="submit" id="pwsubmit" ng-click="detailspassword()" name="Submit">
            </div>
        </div>

2 个答案:

答案 0 :(得分:0)

您需要将后调用中的数据作为第二个参数传递。

var objPassword = {
       existedpassword : $scope.existedpassword
       newpassword : $scope.newpassword
       newpassword : $scope.confirmpassword
}

$http.post('/java/updatepassword',objPassword).then(submitvalue, error);

了解更多Angular#POST

编辑:

myangu.controller('account', ['$scope', '$http', function ($scope, $http) {
    $scope.detailspassword = function () {
        alert($scope.confirmpassword + "" + $scope.newpassword + "" + $scope.existedpassword);
        var formData = { cpass: $scope.confirmpassword, newpass: $scope.newpassword, oldpass: $scope.existedpassword };

        var error = function (responce) {
            $scope.errormessage = "Unsuccessful";
        };
        $http.post('/java/updatepassword',formData).then(submitvalue, error);
    };
}]);

答案 1 :(得分:0)

我猜这种情况是:用户登录并将更改密码

怎么样试试这个, 通过从@RequestParams接收旧密码,新密码和userId来修改您的后端(或者,如果您没有userId,那么请使用每个用户唯一的内容,例如电子邮件来查询用户的信息)你的数据库)

在春天

@RequestMapping(value = "/updatepassword", method = RequestMethod.POST,produces="application/json")
public @ResponseBody String updatepassword(@RequestParam String userId, @RequestParam String existedPassword, @RequestParam String newPassword) {

    // query user by userId and match if existedPassword from request param is the same as user.getPassword()
   // if password is correct then update the password to the new password and 
   // return blabla


}

然后以角度

查看控制器
// first check if $scope.newpassword is the same value as $scope.confirmpassword 
// then send the following POST request

$http.post('/java/updatepassword', 
  { params: { 
       "userId": userId,          // as long as, the user logged in so you can get userId somehow
       "existedPassword": $scope.existedpassword, 
       "newPassword": $scope.newpassword
            }
  })
.then(function successCallback(response) {
   // success
}, function errorCallback(response) {
  console.log(response);
});

希望它可以帮助您获得解决此问题的替代方法:)