1.前端页面点击登录按钮调用函数login()

此处注意将form表单button的属性type设置为"button"而不是"submit" ,后者可能会导致ajax

请求成功后又进行表单提交而使得location.href=""页面不跳转。

前端页面:

login.html内容

<div class="form_btn">
	<button type="button" onclick="javascript:login()">登录</button>
</div>

2.后台同时配置html和jsp的视图解析器

<!-- 配置html视图解析器 -->
	<!-- html视图解析器 必须先配置freemarkerConfig,注意html是没有prefix前缀属性的-->  
    <bean id="freemarkerConfig" class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer">    
       <property name="templateLoaderPath">    
           <value>/</value>    
       </property>    
    </bean>    
    <bean id="htmlviewResolver"    
       class="org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver">    
       <property name="suffix" value=".html" />   
       <property name="order" value="0"></property>   
       <property name="contentType" value="text/html;charset=UTF-8"></property>           
   </bean>   
	
	<!-- jsp视图解析器 -->
	<bean id="jspViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<!-- <property name="viewClass" value="org.springframework.web.servlet.view.JstlView" /> -->
		<!-- 如果配置的有html视图解析器,不能用jstl的那个 -->
		<property name="viewClass" value="org.springframework.web.servlet.view.InternalResourceView"/> 
		<property name="prefix" value="/WEB-INF/page/" />   <!-- jsp前缀 -->
		<property name="suffix" value=".jsp" />		<!-- jsp后缀 -->
		<property name="contentType" value="text/html;charset=UTF-8"/>
		<property name="order" value="1" />		<!-- 配置优先等级,越小优先级越高 -->
	</bean>

3.前端页面login.html中发起ajax请求,请求后台进行登录验证

<script type="text/javaScript">
	function login() {
		userInput = $("input[name='userInput']").val();
		password = $("input[name='password']").val();

		$.ajax({
			url : "项目名/login",
			type : "post",
			data : {
				"userInput" : userInput,
				"password" : password,
			},
		
			dataType : "json",
			cache : false,
			async : false,//设置同步(ajax请求此处需求为跳转而不是局部页面刷新)
			success : function(data) {//管理员登录
				if (data == "1") {
					alert("登录成功!");
					location.href ="admin";
				} else if(data=="2")//普通用户登录
					{
						alert("登录成功!");
						window.location.href="index";
					}
				else if(data=="-1")
					alert("用户名或密码不正确!");
			},
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				alert("服务器错误!");
			}
		})
	}
</script>

这里ajax发起POST请求在UserController中处理查询数据库是否登录后返回数字‘1’,‘2’来决定向何处跳转。window.location.href="index"是请求成功后再次发出GET请求。再利用IndexController跳转到index.jsp首页。实现去后缀跳转。

UserController内容

此处用注解@ResponseBody(向前台Ajax传请求成功后的data信息)

@Controller
@RequestMapping("项目名")
public class UserController {

	@Resource
	UserService userService;
	@RequestMapping(value = "/login", method = RequestMethod.POST)
	@ResponseBody
	public String login(User user, HttpServletRequest req) {
		HttpSession session = req.getSession();
		String userinput=req.getParameter("userInput");
		String pwd = req.getParameter("password");
		pwd=MD5Utils.getMD5(pwd);
		
		User loginuser = userService.userlogin(userinput,pwd);// 数据库查询,若有记录则登录
			if (loginuser != null) {
			//	System.out.println("----------------------"+loginuser.toString());
				// 将数据库中查到的user信息存到session中
				session.setAttribute("user", loginuser);
				if (loginuser.getRoleId() == 1)
					return "1";// 跳转后台管理页
				else
					return "2"; // 跳转首页
			}
			return "-1";
	}

IndexController内容

 //跳转系统主页
	@RequestMapping(value = "/index", method = RequestMethod.GET)
    public String login() {
		return "index";
    }
	
	  //跳转管理员主页 
	  @RequestMapping(value = "/admin", method = RequestMethod.GET)
     public String loginAdmin(){
	  
	      return "admin/index"; 
    }

更多推荐

SpringMVC中设置Ajax请求登录成功后实现页面跳转到jsp首页且隐藏.jsp后缀