表单使用$ http.post使用Angularjs提交给SpringMVC控制器

Question

如何从jsp向Springmvc控制器发送多个数据以更改密码。 我想使用角度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> 

Answer 1

你需要传递后调用的第二个参数数据。

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); 
    }; 
}]); 

Answer 2

我想这种情况是：登录的用户，并不会改变密码

怎么样试试这个， 通过从@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); 
}); 

希望它可以帮助你替代方法来解决这个问题:)