ssm怎样使用ajax在本页面实现登录
时间: 2024-03-25 16:36:57 浏览: 13
首先,你需要在JSP页面中引入jQuery库。然后,在你的登录页面中,使用jQuery的ajax方法向服务器发送登录请求。
以下是一个简单的示例代码:
JSP页面:
```html
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btnLogin").click(function(){
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
url: "login.do",
type: "POST",
data: {"username":username, "password":password},
dataType: "json",
success: function(data){
if(data.success){
alert("登录成功!");
window.location.href = "index.jsp";
}else{
alert(data.msg);
}
},
error: function(){
alert("请求失败!");
}
});
});
});
</script>
</head>
<body>
<form>
<label>用户名:</label><input type="text" id="username"><br>
<label>密码:</label><input type="password" id="password"><br>
<input type="button" id="btnLogin" value="登录">
</form>
</body>
</html>
```
Controller代码:
```java
@RequestMapping("/login")
@ResponseBody
public Map<String, Object> login(String username, String password, HttpSession session){
Map<String, Object> result = new HashMap<String, Object>();
// 省略验证用户名和密码的代码
if(username.equals("admin") && password.equals("123456")){
session.setAttribute("username", username);
result.put("success", true);
}else{
result.put("success", false);
result.put("msg", "用户名或密码错误!");
}
return result;
}
```
在ajax请求中,我们将请求的方式设置为POST,数据为用户名和密码。服务器验证用户名和密码是否正确,如果正确则将用户名保存到Session中,并且返回json数据,其中success表示登录是否成功,msg表示错误信息。在ajax的success回调函数中,根据返回的数据进行相应的操作,例如跳转到首页或者弹出错误信息。