文章目录
一、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 = "";
$.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);
}
//用户添加或者用户更新
function addOrUpdateUser(flag) {
//从页面中获取数据
var userid = $("#userid").val();
var username = $("#username").val();
var usersex = $("#usersex").val();
var userbirth = $("#userbirth").val();
var data = {
userid:userid,
username:username,
usersex:usersex,
userbirth:userbirth,
flag:flag
}
location.reload();
$.get("user.do",data,function (result) {
alert(result)
});
}
</script>
3.2、在Servlet中处理添加用户请求
UserServlet.java:
//用户管理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);
}else if ("addUser".equals(flag)){
this.addUser(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();
}
//处理添加用户请求
private void addUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
User user = this.createUser(req);
ServletContext servletContext = this.getServletContext();
List<User> list = (List<User>) servletContext.getAttribute("list");
list.add(user);
resp.setContentType("text/plain;charset=utf-8");
PrintWriter pw = resp.getWriter();
pw.print("添加成功");
pw.flush();
pw.close();
}
//获取请求数据
private User createUser(HttpServletRequest req){
String userid = req.getParameter("userid");
String username = req.getParameter("username");
String usersex = req.getParameter("usersex");
String userbirth = req.getParameter("userbirth");
User user = new User();
user.setUserid(Integer.parseInt(userid));
user.setUsername(username);
user.setUsersex(usersex);
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
try {
Date parse = sdf.parse(userbirth);
user.setUserbirth(parse);
} catch (ParseException e) {
e.printStackTrace();
}
return user;
}
}
解决时区问题:
@JsonFormat(pattern = "yyyy-MM-dd",timezone = "GMT+8")
运行结果:
4、更新用户操作
4.1、通过Ajax完成预更新用户选择
user.jsp:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>用户管理</title>
<script src="js/jquery.js"></script>
<script>
//页面加载事件
$(function () {
//获取页面初始化数据
getData();
//添加按钮绑定点击事件
$("#add").click(function () {
addOrUpdateUser("addUser");
});
});
//获取页面初始化数据
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("+this.userid+")'>选择更新</a> <a href='#' οnclick='deleteUser("+this.userid+")'>删除</a></td></tr>"
});
$("#tBody").prepend(str);
}
//用户添加或者用户更新
function addOrUpdateUser(flag) {
//从页面中获取数据
var userid = $("#userid").val();
var username = $("#username").val();
var usersex = $("#usersex").val();
var userbirth = $("#userbirth").val();
var data = {
userid:userid,
username:username,
usersex:usersex,
userbirth:userbirth,
flag:flag
}
$.get("user.do",data,function (result) {
alert(result)
});
location.reload();
}
//更新之前的数据选择
function preUpdateUser(userid) {
var arr = new Array();
$("#"+userid).closest("tr").children().each(function (index,ele) {
if (index <= 3){
arr[index] = ele.innerText
}
});
$("#userid").val(arr[0]);
$("#username").val(arr[1]);
$("#usersex").val(arr[2]);
$("#userbirth").val(arr[3]);
$("#userid").attr("readonly",true);
}
</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>
4.2、通过Ajax完成更新用户
<script>
//页面加载事件
$(function () {
//获取页面初始化数据
getData();
//添加按钮绑定点击事件
$("#add").click(function () {
addOrUpdateUser("addUser");
});
//更新按钮绑定点击事件
$("#update").click(function () {
addOrUpdateUser("updateUser");
});
});
//获取页面初始化数据
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("+this.userid+")'>选择更新</a> <a href='#' οnclick='deleteUser("+this.userid+")'>删除</a></td></tr>"
});
$("#tBody").prepend(str);
}
//用户添加或者用户更新
function addOrUpdateUser(flag) {
//从页面中获取数据
var userid = $("#userid").val();
var username = $("#username").val();
var usersex = $("#usersex").val();
var userbirth = $("#userbirth").val();
var data = {
userid:userid,
username:username,
usersex:usersex,
userbirth:userbirth,
flag:flag
}
$.get("user.do",data,function (result) {
alert(result)
});
location.reload();
}
//更新之前的数据选择
function preUpdateUser(userid) {
var arr = new Array();
$("#"+userid).closest("tr").children().each(function (index,ele) {
if (index <= 3){
arr[index] = ele.innerText
}
});
$("#userid").val(arr[0]);
$("#username").val(arr[1]);
$("#usersex").val(arr[2]);
$("#userbirth").val(arr[3]);
$("#userid").attr("readonly",true);
}
</script>
4.3、在Servlet中处理更新用户请求
UserServlet.java:
//用户管理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);
}else if ("addUser".equals(flag)){
this.addUser(req,resp);
}else if ("updateUser".equals(flag)){
this.updateUser(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();
}
//处理添加用户请求
private void addUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
User user = this.createUser(req);
ServletContext servletContext = this.getServletContext();
List<User> list = (List<User>) servletContext.getAttribute("list");
list.add(user);
resp.setContentType("text/plain;charset=utf-8");
PrintWriter pw = resp.getWriter();
pw.print("添加成功");
pw.flush();
pw.close();
}
//获取请求数据
private User createUser(HttpServletRequest req){
String userid = req.getParameter("userid");
String username = req.getParameter("username");
String usersex = req.getParameter("usersex");
String userbirth = req.getParameter("userbirth");
User user = new User();
user.setUserid(Integer.parseInt(userid));
user.setUsername(username);
user.setUsersex(usersex);
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
try {
Date parse = sdf.parse(userbirth);
user.setUserbirth(parse);
} catch (ParseException e) {
e.printStackTrace();
}
return user;
}
//处理更新用户请求
private void updateUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
User user = this.createUser(req);
ServletContext servletContext = this.getServletContext();
List<User> list = (List<User>) servletContext.getAttribute("list");
User u = null;
for (User temp : list){
if (temp.getUserid() == user.getUserid()){
u = temp;
break;
}
}
if (u != null){
list.remove(u);
}
list.add(user);
resp.setContentType("text/plain;charset=utf-8");
PrintWriter pw = resp.getWriter();
pw.print("更新成功");
pw.flush();
pw.close();
}
}
5、删除用户操作
5.1、通过Ajax完成删除用户
<script>
//页面加载事件
$(function () {
//获取页面初始化数据
getData();
//添加按钮绑定点击事件
$("#add").click(function () {
addOrUpdateUser("addUser");
});
//更新按钮绑定点击事件
$("#update").click(function () {
addOrUpdateUser("updateUser");
});
});
//获取页面初始化数据
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("+this.userid+")'>选择更新</a> <a href='#' οnclick='deleteUser("+this.userid+")'>删除</a></td></tr>"
});
$("#tBody").prepend(str);
}
//用户添加或者用户更新
function addOrUpdateUser(flag) {
//从页面中获取数据
var userid = $("#userid").val();
var username = $("#username").val();
var usersex = $("#usersex").val();
var userbirth = $("#userbirth").val();
var data = {
userid:userid,
username:username,
usersex:usersex,
userbirth:userbirth,
flag:flag
}
$.get("user.do",data,function (result) {
alert(result)
});
location.reload();
}
//更新之前的数据选择
function preUpdateUser(userid) {
var arr = new Array();
$("#"+userid).closest("tr").children().each(function (index,ele) {
if (index <= 3){
arr[index] = ele.innerText
}
});
$("#userid").val(arr[0]);
$("#username").val(arr[1]);
$("#usersex").val(arr[2]);
$("#userbirth").val(arr[3]);
$("#userid").attr("readonly",true);
}
//删除用户
function deleteUser(userid) {
$("#"+userid).closest("tr").remove();
$.get("user.do",{userid:userid},function (result) {
alert(result);
})
}
</script>
5.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);
}else if ("addUser".equals(flag)){
this.addUser(req,resp);
}else if ("updateUser".equals(flag)){
this.updateUser(req,resp);
}else{
this.deleteUser(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();
}
//处理添加用户请求
private void addUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
User user = this.createUser(req);
ServletContext servletContext = this.getServletContext();
List<User> list = (List<User>) servletContext.getAttribute("list");
list.add(user);
resp.setContentType("text/plain;charset=utf-8");
PrintWriter pw = resp.getWriter();
pw.print("添加成功");
pw.flush();
pw.close();
}
//获取请求数据
private User createUser(HttpServletRequest req){
String userid = req.getParameter("userid");
String username = req.getParameter("username");
String usersex = req.getParameter("usersex");
String userbirth = req.getParameter("userbirth");
User user = new User();
user.setUserid(Integer.parseInt(userid));
user.setUsername(username);
user.setUsersex(usersex);
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
try {
Date parse = sdf.parse(userbirth);
user.setUserbirth(parse);
} catch (ParseException e) {
e.printStackTrace();
}
return user;
}
//处理更新用户请求
private void updateUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
User user = this.createUser(req);
ServletContext servletContext = this.getServletContext();
List<User> list = (List<User>) servletContext.getAttribute("list");
User u = null;
for (User temp : list){
if (temp.getUserid() == user.getUserid()){
u = temp;
break;
}
}
if (u != null){
list.remove(u);
}
list.add(user);
resp.setContentType("text/plain;charset=utf-8");
PrintWriter pw = resp.getWriter();
pw.print("更新成功");
pw.flush();
pw.close();
}
//处理删除用户请求
private void deleteUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
ServletContext servletContext = this.getServletContext();
List<User> list = (List<User>) servletContext.getAttribute("list");
String userid = req.getParameter("userid");
User user = null;
for (User temp:list){
if ((temp.getUserid()+"").equals(userid)){
user = temp;
break;
}
}
if (user != null){
list.remove(user);
}
resp.setContentType("text/plain;charset=utf-8");
PrintWriter pw = resp.getWriter();
pw.print("删除成功");
pw.flush();
pw.close();
}
}
案例结束!!!