Note: I have Explained this in Spring Please Modify The Accordingly.
<div class="signIn-box">
<form id="UserLoginForm" method="post" action="javascript:void(0);">
<div style="display:none;">
<input type="hidden" id ="loginaction" name="action" value="${hosturi}application/login.htm">
</div>
<label>User Name:</label>
<input name="loginUsername" type="text" maxlength="15" id="UserUsername">
<label>Password:</label>
<input type="password" name="loginPassword" id="UserPassword">
<input type="submit" name="login" id="login" value="LOGIN" onclick="return submitLogin();"/>
</form>
</div>
<span id="status"></span>
<span id="userdata"></span>
-------------------------------------------------------------------------------------------------------------------
function submitLogin(){
// Gets The Form Data and Stores in the Variable
var postData = $('#UserLoginForm').serialize();
// gets the URL to Submit the Form Data
var formURL = $('#loginaction').val();
$.ajax({
url : formURL,
//Type of Method to Submit the Form Data
type: "POST",
data : postData,
// Form Data Response Handler
success:function(responseText){
if(responseText.status == 'success'){
var user = responseText.uservo;
var userMsg = 'Hi ' + user.getUserName + ' your password is ' + user.getPassword + ' Thank you ';
$('#status').html("Logged In");
$('#userdata').append(userMsg);
}else if(responseText.status == 'notActivated'){
$('#loginmessages').html("<span style='font-size:12px;'>Your account is not activated. Please click on the link sent to your registered email and activate your account</span>");
}
},
error: function(jqXHR, textStatus, errorThrown){
alert('enter valid credentials');
unblock();
}
});
}
-------------------------------------------------------------------------------------------------------------------
@RequestMapping(value = "login", method = RequestMethod.POST)
public String login(HttpServletRequest request, HttpServletResponse response, Model model){
userService.getUser(request,response,model);
response.setContentType("application/json");
return "jsonView";
}
-------------------------------------------------------------------------------------------------------------------
@Transactional
public void getUser(HttpServletRequest request,HttpServletResponse response, Model model){
String userName = request.getParameter("loginUsername");
String password = request.getParameter("loginPassword");
if(userName != null && !userName.isEmpty() && password != null && !password.isEmpty()){
// Write the code connect to database and check the user in the database and password are matched
UserVO uservo = new UserVO();
uservo.setUserName(userName);
uservo.setUserPassword(password);
model.addAttribute("status", "success");
model.addAttribute("uservo", uservo);
}else{
model.addAttribute("status", "required");
}
}
-------------------------------------------------------------------------------------------------------------------
HTML Page
<div class="signIn-box">
<form id="UserLoginForm" method="post" action="javascript:void(0);">
<div style="display:none;">
<input type="hidden" id ="loginaction" name="action" value="${hosturi}application/login.htm">
</div>
<label>User Name:</label>
<input name="loginUsername" type="text" maxlength="15" id="UserUsername">
<label>Password:</label>
<input type="password" name="loginPassword" id="UserPassword">
<input type="submit" name="login" id="login" value="LOGIN" onclick="return submitLogin();"/>
</form>
</div>
<span id="status"></span>
<span id="userdata"></span>
-------------------------------------------------------------------------------------------------------------------
Script
function submitLogin(){
// Gets The Form Data and Stores in the Variable
var postData = $('#UserLoginForm').serialize();
// gets the URL to Submit the Form Data
var formURL = $('#loginaction').val();
$.ajax({
url : formURL,
//Type of Method to Submit the Form Data
type: "POST",
data : postData,
// Form Data Response Handler
success:function(responseText){
if(responseText.status == 'success'){
var user = responseText.uservo;
var userMsg = 'Hi ' + user.getUserName + ' your password is ' + user.getPassword + ' Thank you ';
$('#status').html("Logged In");
$('#userdata').append(userMsg);
}else if(responseText.status == 'notActivated'){
$('#loginmessages').html("<span style='font-size:12px;'>Your account is not activated. Please click on the link sent to your registered email and activate your account</span>");
}
},
error: function(jqXHR, textStatus, errorThrown){
alert('enter valid credentials');
unblock();
}
});
}
-------------------------------------------------------------------------------------------------------------------
Spring Controller Class
@RequestMapping(value = "login", method = RequestMethod.POST)
public String login(HttpServletRequest request, HttpServletResponse response, Model model){
userService.getUser(request,response,model);
response.setContentType("application/json");
return "jsonView";
}
-------------------------------------------------------------------------------------------------------------------
Spring Service Class
@Transactional
public void getUser(HttpServletRequest request,HttpServletResponse response, Model model){
String userName = request.getParameter("loginUsername");
String password = request.getParameter("loginPassword");
if(userName != null && !userName.isEmpty() && password != null && !password.isEmpty()){
// Write the code connect to database and check the user in the database and password are matched
UserVO uservo = new UserVO();
uservo.setUserName(userName);
uservo.setUserPassword(password);
model.addAttribute("status", "success");
model.addAttribute("uservo", uservo);
}else{
model.addAttribute("status", "required");
}
}
-------------------------------------------------------------------------------------------------------------------
No comments:
Post a Comment