The code of the Controller on the login page is as follows:

In this process, it is necessary to judge whether the user name exists or not? Is the password incorrect? Is the verification code incorrect? If there are no errors, the page will jump to the login success page.

@RequsetMapper("/login.do")
public @ResponseBody Map<String, Object> login(HttpServletRequest req,String validatecode,Model m,Userlist u){
	Map<String , Object> map =new HashMap<String,Object>();

	System.out.println(u.getUserAccount());
	Userlist us=userService.selectname(u.getUserAccount());//Define a new Userlist and assign it the value found by the database
	//The user does not exist in the database
	if(us == null){
		map.put("suc", false);
		map.put("error", "User name does not exist!");
		return map;
	}

	String md5pwd=StringUtil.encode(u.getUserPassword());

	if(!md5pwd.equals(us.getUserPassword())){
		map.put("suc", false);
		map.put("error", "Wrong password!");
		return map;
		
	}
	String valiCode =(String)req.getSession().getAttribute("validateCode");   
	
	if(!validatecode.trim().equalsIgnoreCase(valiCode)){
		map.put("suc", false);
		map.put("error", "Verification code error!");
	    return map;
	}
	map.put("suc",true);//If none of the above judgments are true, the login is successful! Jump to the success page.   
	map.put("url","index.do");
	return map;
}

How to write page AJAX

It should be noted here that the value passing problem of JS and Ajax. Var useraccount = $("ාuseraccount"). Val(); this method passes page data, which can be directly compared with the data in the database.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
		function test(){
		
			var userAccount=$("#userAccount").val();
			var userPassword=$("#userPassword").val();
			var validatecode=$("#validatecode").val();
			
			var flag=true;
	        //Newspaper name
	        if(userAccount=="") {
	          flag=false;
			  alert("User name cannot be empty!");
			  return;
	        }
	        if(userPassword=="") {
	          flag=false;
			  alert("Password cannot be empty!");
			  return;
	        }
	        if(validatecode=="") {
	          flag=false;
			  alert("Verification code cannot be empty!");
			  return;
	        }
	        $.ajax({
	        	url:'login.do',
	        	type:'post',
	        	data:'userAccount='+userAccount+'&userPassword='+userPassword+'&validatecode='+validatecode,
	        	datatype:'json',
	        	success: function(msg){
	        			if(msg.suc){
	        				location.href=msg.url;
	        			}else{
	        			   alert(msg.error);
	        			}
	        			
	        	}
	      
	        }) 
		}
		

Page form data.

 <tr>
        <td width="31%" height="35" class="login-text02">User name:<br /></td>
        <td width="69%"><input id="userAccount" name="userAccount" type="text" size="30" /></td>
      </tr>
      <tr>
        <td height="35" class="login-text02">dense　Code:<br /></td>
        <td><input id="userPassword" name="userPassword" type="password" size="33" /></td>
      </tr>
      <tr>
        <td height="35" class="login-text02">Verify picture:<br /></td>
        <td><img id="imgcode" src="verifyCodeServlet?tm=<%=new Date() %>" width="109" height="40" /> <a href="javascript:void(0)" onclick="document.getElementById('imgcode').src='verifyCodeServlet?code='+Math.random();" class="login-text03">I can't see clearly. Change the picture</a></td>
      </tr>
      <tr>
        <td height="35" class="login-text02">Please enter the verification code:</td>
        <td><input id="validatecode" name="validatecode" id="validatecode" type="text" size="30" /></td>
      </tr>
      <tr>
        <td height="35">&nbsp;</td>
        
        <td><input name="Submit" type="button" class="button" value="Confirm landing"  onclick="test()"/>
  
      </tr>