表單使用$ 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); 
}); 

希望它可以幫助你替代方法來解決這個問題:)