Form Submit using Angularjs to SpringMVC Controller using $http.post - angularjs

Question

How to send multiple data from jsp to Springmvc controller to change password.
I wants to change password using angular js.
How to solve this?
Alert message showing properly but cannot call controller using post method.
My js code
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 controller
#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 page
<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

You need to pass the data in post call as second parameter.
var objPassword = {
existedpassword : $scope.existedpassword
newpassword : $scope.newpassword
newpassword : $scope.confirmpassword
}
$http.post('/java/updatepassword',objPassword).then(submitvalue, error);
For more Angular#POST
EDIT :
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

I guess this scenario is: a user logged in and is going to change the password
how about try this,
modify your backend by receiving the old password, new password and userId from #RequestParams (or if you don't have userId then use whatever that are unique for each user like email to query user's information from your DB)
in Spring
#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
}
then take a look at controller in angular
// 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);
});
Hope it can help you get alternative way to solve this :)