文章目录
一、Ajax 实战案例
需求:
创建 User 类,包含 uesrid、username、usersex、userbirth 属性。
在用户管理页面中通过 Ajax 技术完成对用户数据载入、添加用户、更新用户、删除用户操作。
1、搭建环境
1.1、创建User类
public class User {
private int userid;
private String username;
private String usersex;
@JsonFormat(pattern = "yyyy-MM-dd")
private Date userbirth;
public int getUserid() {
return userid;
}
public void setUserid(int userid) {
this.userid = userid;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getUsersex() {
return usersex;
}
public void setUsersex(String usersex) {
this.usersex = usersex;
}
public Date getUserbirth() {
return userbirth;
}
public void setUserbirth(Date userbirth) {
this.userbirth = userbirth;
}
}
1.2、在页面中创建表格
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>用户管理</title>
<script src="js/jquery.js"></script>
<script>
</script>
</head>
<body>
<table align="center" width="60%" border="1">
<tr>
<td>ID:</td>
<td><input type="text" name="userid" id="userid"/></td>
<td>姓名:</td>
<td><input type="text" name="username" id="username"/></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="text" name="usersex" id="usersex"/></td>
<td>生日:</td>
<td><input type="text" name="userbirth"
id="userbirth"/></td>
</tr>
<tr align="center">
<td colspan="4">
<input type="button" value="添加用户" id="add" />
<input type="button" value="更新用户" id="update"/>
</td>
</tr>
</table>
<hr/>
<table align="center" width="60%" bgcolor="" border="1"
id="myTable">
<thead>
<tr align="center">
<td>ID</td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>操作</td>
</tr>
</thead>
<tbody id="tBody"></tbody>
</table>
</body>
</html>
1.3、运行效果:
2、加载用户数据
2.1、通过Ajax完成页面数据初始化
<script>
//页面加载事件
$(function () {
//获取页面初始化数据
getData();
});
//获取页面初始化数据
function getData() {
$.getJSON("user.do",{
flag:"getData"},function (result) {
init(result)
})
}
//遍历数组生成数据
function init(obj) {
var str = "";
$.each(obj,function () {
str += "<tr align='center'><td id='"+this.userid+"'>"+this.userid+"</td><td>"+this.username+"</td><td>"+this.usersex+"</td><td>"+this.userbirth+"</td><td><a href='#' οnclick='preUpdateUser()'>选择更新</a><a href='#' οnclick='deleteUser("+this.userid+")'>删除</a></td></tr>"
});
$("#tBody").prepend(str);
}
</script>
2.2、创建Servlet处理页面数据初始化请求
//用户管理Servlet
@WebServlet("/user.do")
public class UserServlet extends HttpServlet {
//生成模拟数据初始化
@Override
public void init() throws ServletException {
User user = new User();
user.setUserid(1);
user.setUsername("Corey");
user.setUsersex("male");
user.setUserbirth(new Date());
User user1 = new User();
user1.setUserid(2);
user1.setUsername("Kang");
user1.setUsersex("male");
user1.setUserbirth(new Date());
List<User> list = new ArrayList<>();
list.add(user);
list.add(user1);
ServletContext servletContext = this.getServletContext();
servletContext.setAttribute("list",list);
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String flag = req.getParameter("flag");
if ("getData".equals(flag)){
this.getData(req,resp);
}
}
//获取页面初始化数据
private void getData(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
List<User> list = (List<User>) this.getServletContext().getAttribute("list");
String s = JsonUtils.objectToJson(list);
resp.setContentType("application/json");
PrintWriter pw = resp.getWriter();
pw.print(s);
pw.flush();
pw.close();
}
}
运行结果:
3、添加用户操作
3.1、通过Ajax完成添加用户
<script>
//页面加载事件
$(function () {
//获取页面初始化数据
getData();
//添加按钮绑定点击事件
$("#add").click(function () {
addOrUpdateUser("addUser");
});
});
//获取页面初始化数据
function getData() {
$.getJSON("user.do",{
flag:"getData"},function (result) {
init(result)
})
}
//遍历数组生成数据
function init(obj) {
var str = "";
$.e