HTML代码
//如果使用<input>当作表单提交按钮，按照下面这么写，两者选其一
<form id="accountForm">
//注意这里input的name和action获取前端数据有关，所以必须对应起来.
<input id="username" name="username" type="text">
<input id="password" name="password" type="password">
<input id="submitButton" type="button" value="登录">
</form>
//如果使用<button>当作表单提交按钮，按照下面这么写，两者选其一
<form id="accountForm">
//注意这里input的name和action获取前端数据有关，所以必须对应起来.
<input id="username" name="username" type="text">
<input id="password" name="password" type="password">
<form>
<button id="submitButton">登陆</button>
//<form>标签里面不应该使用<button>标签！！！！
.....
<script>
$(document).ready(function () {
$("#submitButton").click(function () {
var username = $("#username").val();
var password = $("#password").val();
if (username == "" || password == "") {
alert("用户名和密码不能为空，请重新输入");
$("#username").val("");
$("#password").val("");
} else {
$.ajax({
type:"post",
url:"login",
//将表单内容序列化成一个字符串，如下：username=wwc&password=wwc，如果是post请求，那么这串字符串就以请求体的方式传递给后端action
data:$("#accountForm").serialize(),
datatype:"json",
success:function (data) {
var d = eval("(" + data + ")");
if (d.login == "success") {
window.location.href = "index.html";
} else if (d.login == "false") {
alert("用户名或密码错误 \r 请重新输入");
$("#username").val("");
$("#password").val("");
}
},
error:function () {
alert("系统异常");
}
});
}
});
});
</script>
Action代码
public class LoginAction extends ActionSupport implements ModelDriven {
private UserService userService;
//这个result字符串是在struts.xml里配置的action的返回结果，必须对应.
private String result;
//必须提供result字符串的get方法，否则前端无法获取数据.
public String getResult() {
return result;
}
//这是利用spring框架将userService注入到LoginAction中，并赋值为LoginAction的属性。（虽然与ajax提交表单没有直接联系，但是在整个程序中用到，所以贴一下.）
public void setUserService(UserService userService) {
this.userService = userService;
}
//模型驱动
//这里会有一个User类，并且User类用有String username和String password两个属性，这两个的属性名和表单中input标签的name必须相同！！！
private User user = new User();
public Object getModel() {
return user;
}
@Override
public String execute() throws Exception {
//判断该用户在数据库中是否存在
boolean checkUser = userService.checkUser(user.getUsername(), user.getPassword());
if (checkUser) {
//返回给前台ajax的数据，为什么result知道返回给ajax呢？这个在struts.xml中会给出答案
result = "{\"login\":\"success\"}";
} else {
result = "{\"login\":\"false\"}";
}
return "success";
}
}
User类代码
//用struts2框架，必须提供空构造方法和属性的get、set方法
public class User {
private Integer id;
private String username;
private String password;
public User() {}
public User(String username, String password) {
this.username = username;
this.password = password;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
struts.xml中的配置
//必须加上json-default，要使用这个标签必须引入struts2-json-plugin-2.3.15.3.jar这个包
<package name="user" extends="struts-default, json-default">
<action name="login" class="loginAction" method="execute">
<result name="success" type="json">
//这里的result就是Action类中的那个result，必须对应
<param name="root">result</param>
</result>
</action>
</package>
