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";
}