该博客介绍了如何使用Ajax技术实现用户管理功能，包括创建User类，搭建环境，使用Ajax进行页面数据初始化，添加、更新和删除用户操作。详细讲述了每个步骤，如通过Servlet处理请求，以及在前端如何通过Ajax异步通信。
AJAX实例
需求
创建 User 类，包含 uesrid、username、usersex、userbirth 属性。
在用户管理页面中通过 Ajax 技术完成对用户数据载入、添加用户、更新用户、删除用 户操作。
搭建环境
创建一个新的项目：ajaxObject
导入对应的jar包
修改tomcat的运行路径
基础类的创建
User.java
package com.bjsxt.pojo;
import com.fasterxml.jackson.annotation.JsonFormat;
import java.util.Date;
public class User {
private int userid;
private String username;
private String usersex;
//使用注解完成日期格式的转换
@JsonFormat(pattern = "yyyy-MM-dd",timezone = "GMT+8")
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;
}
}
创建表格
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2021/3/10 0010
Time: 14:23
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>用户管理</title>
<script src="js/jquery.js"></script>
<script>
</script>
</head>
<body>
<br/>
<br/>
<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>
<br/>
<hr/>
<br/>
<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>
运行：
加载用户的数据
也就是让下方的表格显示servlet设置的map里的数据
通过ajax完成页面数据初始化
<head>
<title>用户管理</title>
<script src="js/jquery.js"></script>
<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("+this.userid+")'>选择更新</a> <a href='#' οnclick='deleteUser("+this.userid+")'>删除</a></td></tr>";
});
//在表格的最底部添加数据
$("#tBody").prepend(str);
}
</script>
</head>
创建 Servlet 处理页面数据初始化请求
package com.bjsxt.servlet;
import com.bjsxt.common.JsonUtils;
import com.bjsxt.pojo.User;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
/**
* 用户管理Servlet
*/
@WebServlet("/user.do")
public class UserServlet extends HttpServlet {
//生成模拟的数据初始化
@Override
public void init() throws ServletException {
User user = new User();
user.setUserid(1);
user.setUsername("Oldlu");
user.setUsersex("male");
user.setUserbirth(new Date());
User user2 = new User();
user2.setUserid(2);
user2.setUsername("Kevin");
user2.setUsersex("male");
user2.setUserbirth(new Date());
List<User> list = new ArrayList<>();
list.add(user);
list.add(user2);
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 {
System.out.println("进入getData");
//从servletContext对象内将List取出来，将list转为JSON，再将其响应给浏览器
List<User> list = (List<User>) this.getServletContext().getAttribute("list");
String s = JsonUtils.objectToJson(list);
System.out.println(s);
//因为在user.jsp内的getData方法使用的是$.getJSON 所以需要给到user.jsp的数据格式应该是json格式的
resp.setContentType("application/json");
PrintWriter pw = resp.getWriter();
pw.print(s);
pw.flush();
pw.close();
}
}
添加用户的操作
点击添加按钮，发送异步请求到一个servlet，在这个异步请求内，同时获取到的还有输入框输入的内容，在servlet内将数据获取出来，将其更新到servletContext对象内（我们这里使用ServetContext对象去模拟数据库，有需要的自己修改）
我们可以看出，添加用户和更新用户的执行流程是十分相似的，我们提供一个js函数，在这个函数内，我们既可以进行用户的添加，也可以进行用户的更新。
通过 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();
}
</script>
在 Servlet 中处理添加用户请求
Servlet 代码
@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 addUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
User user = this.createUser(req);
//获取servletContext对象
ServletContext servletContext = this.getServletContext();
List<User> list = (List<User>) servletContext.getAttribute("list");
//将获得的user对象添加到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);
//将获取到的字符串数据转为date类型的数据
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
try {
Date parse = sdf.parse(userbirth);
user.setUserbirth(parse);
} catch (ParseException e) {
e.printStackTrace();
}
return user;
}
更新用户操作
通过 Ajax 完成预更新用户选择
点击选择更新，将选择的用户的数据回填到上方的输入框内
我们根据数据遍历时生成数据的函数代码内创建的“选择更新”的函数方法preUpdateUser
$.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>";
});
实现这个方法
//更新之前的数据选择
function preUpdateUser(userid) {
var arr = new Array();
//通过closest获取距离id为userid的最近的tr
$("#"+userid).closest("tr").children().each(function(index,ele){
if(index <=3){ //当迭代因子小于等于3时
//将元素的内容存放到arr数组内
arr[index]= ele.innerText
}
});
//将数据回填到表格的输入框内
$("#userid").val(arr[0]);
$("#username").val(arr[1]);
$("#usersex").val(arr[2]);
$("#userbirth").val(arr[3]);
$("#userid").attr("readonly",true);
}
就可以实现点击选择更新将选择的数据回填到输入框内
通过$("#userid").attr(“readonly”,true);将id设为只读的，不可修改
通过 Ajax 完成更新用户
$(function () {
//获取页面初始化数据
getData();
//为添加用户的按钮绑定一个点击的事件
$("#add").click(function(){
addOrUpdateUser("addUser");
});
//更新按钮绑定点击事件
$("#update").click(function(){
addOrUpdateUser("updateUser");
});
});
在 Servlet 中处理更新用户请求
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 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){
//如果在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();
}
删除用户的操作
通过 Ajax 完成删除用户
$.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>";
});
//删除用户
function deleteUser(userid){
//用一个id选择器找到对应的tr然后将其移除掉
$("#"+userid).closest("tr").remove();
//发送异步请求
$.get("user.do",{userid:userid},function(result){
alert(result);
})
}
在 Servlet 处理删除用户请求
@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);
}
}
//处理删除用户请求
/**
* 先获取ServletContext的对象，在ServletContext内获取到list，再遍历list，在list内找有没有和userid有关的数据
* 如果有，就将这个用户移除掉
*/
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();
}
扫一扫
2085
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
