JavaWeb--Ajax
一，Ajax简介
1.为什么要使用Ajax技术
通过在后台与服务器进行少量数据交换，Ajax 可以使页面实现异步更新。这意味着可以在不重新加载整个页面的情况下，对页面的某部分进行更新。
2，Ajax的应用场景
01，用户名检测
注册用户时，通过 Ajax 的形式，动态检测用户名是否被占用。
02，搜索提示
当输入搜索关键字时，通过 Ajax 的形式，动态加载搜索提示列表。
03，数据分页显示
当点击页码值的时候，通过 ajax 的形式，根据页码值动态刷新表格的数据。
04，数据的增删改查
数据的添加、删除、修改、查询操作，都需要通过 ajax 的形式，来实现数据的交互。
二，JSON简介
1，为什么要使用JSON
2，XML简介
比如说我有一个学生数据： name = "zhangsan" ; age = 22; gender = "男" ;
用 XML 表示：
<student><name>zhangsan</name><age>22</age><gender>男</gender></student>用 JSON 表示：
{"name":"zhangsan","age":22,"gender":"男"
}
3，JSON格式的特征
JSON是按照特定的语法规则所生成的字符串结构。
大括号表示JSON的字符串对象。{ }
属性和值用冒号分割。{"属性":"value"}
属性和属性之间用逗号分割。{"属性":"value","属性":"value",...}
中括号表示数组。[{"属性":"value"...},{"属性":"value"...}]
4，JSON的6种数据类型
三，FastJson是什么
1，Fastjson的使用场景
Fastjson已经被广泛使用在各种场景，包括cache存储、RPC通讯、MQ通讯、网络协议通讯、Android客户端、Ajax服务器处理程序等等。
2，Fastjson优点
01，速度快
02，使用广泛
03，测试完备
3，常用的JSON解析类库
四，下载和使用FastJson
1，序列化和反序列化java对象
使用FastJson将Java对象序列化为JSON字符串很简单，只需要调用FastJson提供的静态方法JSON.toJSONString()。
User user = new User();user.setId(1);user.setName("张三");user.setAge(18);String jsonStr = JSON.toJSONString(user);System.out.println(jsonStr);使用FastJson将JSON字符串反序列化为Java对象也很简单，只需要 调用FastJson提供的静态方法JSON.parseObject()。
String jsonStr = "{\"id\":1,\"name\":\"张三\",\"age\":18}";User user = JSON.parseObject(jsonStr,
User.class);System.out.println(user);2，解析JSON字符串
FastJson提供了一个JSON类，可以方便地解析JSON字符串。
String jsonStr = "{\"id\":1,\"name\":\"张三\",\"age\":18}";JSONObject jsonObject = JSON.parseObject(jsonStr);int id = jsonObject.getIntValue("id");String name = jsonObject.getString("name");int age = jsonObject.getIntValue("age");System.out.println(id + ", " + name + ", " + age);3，使用注解控制序列化和反序列化
FastJson提供了一些注解，可以用于控制序列化和反序列化。@JSONField注解指定了JSON字段的名称、是否序列化、日期格式等属性。
public class User {@JSONField(name = "userId")private int id;@JSONField(serialize = false)private String name;@JSONField(format = "yyyy-MM-dd HH:mm:ss")private Date birthday;// getter和setter方法
}五，Ajax初体验
1，XMLHttpRequest对象
2，Ajax的使用步骤
01，创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();02，给定请求方式以及请求地址
后端服务 ip地址+端口号+资源路径
xhr.open("get","http://v1.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=");03，发送请求
xhr.send();04，获取服务器端给客户端的响应数据
xhr.onreadystatechange = function(){//0:open()没有被调用
//1:open()正在被调用
//2:send()正在被调用
//3:服务端正在返回结果
//4:请求结束，并且服务端已经结束发送数据到客户端
if (this.readyState == 4 && this.status ==
200) {document.getElementById("demo").innerHTML =
this.responseText;}}六，Ajax实战案例
1，需求说明
需求
创建User类，包含id、name、age属性。
在用户管理页面中通过Ajax技术完成对用户数据载入、添加用户、更新用户、删除用户操作。
项目结构
2，搭建环境
数据库创建用户表
# 创建用户表
CREATE TABLE `user` (`id` int NOT NULL AUTO_INCREMENT,`name` varchar(255) DEFAULT NULL,`age` int DEFAULT NULL,PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT
CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;DELETE FROM `user`;# 添加用户
INSERT INTO `user` (id, name, age) VALUES(1, 'Jone', 18),(2, 'Jack', 20),(3, 'Tom', 28),(4, 'Sandy', 21),(5, 'Billie', 24);编写实体类
编写实体类 User.java
/*** 用户表模型
*/public class User {// 序号
private Integer id;// 名字
private String name;// 年龄private Integer age;// 邮箱
public User(Integer id, String name,
Integer age, String email) {this.id = id;this.name = name;this.age = age;}public User() {}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public Integer getAge() {return age;}public void setAge(Integer age) {this.age = age;}@Overridepublic String toString() {return "User{" +"id=" + id +", name='" + name + '\'' + ", age=" + age +'}';}}统一结果返回集
public class ResultAjax {// 返回致态码
private Integer code ;// 返回消息体
private String message;// 返回数据
private Object data;public ResultAjax() {}public ResultAjax(Integer code, String
message, Object data) {this.code = code;this.message = message;this.data = data;}public Integer getCode() {return code;}public void setCode(Integer code) {this.code = code;}public String getMessage() {return message;}public void setMessage(String message) {this.message = message;}public Object getData() {return data;}public void setData(Object data) {this.data = data;}public static ResultAjax success(String
message){return new
ResultAjax(200,message,null);}public static ResultAjax success(Object
object){return new
ResultAjax(200,"success",object);}public static ResultAjax error(String
message){return new
ResultAjax(500,message,null);}}3，编写数据库连接工具
创建数据库连接信息文件
在src目录下创建 druid.properties ,基于Druid连接池获取数据库连接工具类。
driverClassName=com.mysql.jdbc.Driverurl=jdbc:mysql://localhost:3306/test?useSSL=falseusername=rootpassword=123456initialSize=10maxActive=20工具类
/*** 基于Druid连接池获取数据库连接工具类
*/public class JdbcDruidUtil {//数据库连接池对象
private static DataSource dataSource;static{try {//获取读取配置文件的字节输入流对象
InputStream is =
JdbcDruidUtil.class.getClassLoader().getResourceAsStream("druid.properties");//创建Properties对象
Properties pop = new Properties();//加载配置文件
pop.load(is);//创建连接池对象
dataSource =
DruidDataSourceFactory.createDataSource(pop);}catch(Exception e){e.printStackTrace();}}//获取数据库连接对象
public static Connection getConnection(){Connection connection = null;try {connection =
dataSource.getConnection();}
catch (SQLException throwables) {throwables.printStackTrace();}return connection;}//关闭连接对象
public static void
closeConnection(Connection connection){try {connection.close();}
catch (SQLException throwables) {throwables.printStackTrace();}}//关闭Statement对象
public static void closeStatement(Statement
statement){try {statement.close();}
catch (SQLException throwables) {throwables.printStackTrace();}}//关闭ResultSetpublic static void closeResultSet(ResultSet
resultSet) {try {resultSet.close();}
catch (SQLException throwables) {throwables.printStackTrace();}}//DML操作时关闭资源
public static void closeResource(Statement
statement,Connection connection){//先关闭Statement对象
closeStatement(statement);//在关闭Connection对象
closeConnection(connection);}//查询时关闭资源
public static void closeResource(ResultSet
resultSet,Statement statement,Connection
connection){if (resultSet != null){//先关闭ResultSetcloseResultSet(resultSet);}if (statement != null){//在闭Statement对象
closeStatement(statement);}if (connection != null){//最后关闭Connection对象
closeConnection(connection);}}}4，后端实现查询用户数据
用户持久层新增查询接口
新建用户持久层文件UsersDao接口。
/*** 查询所有数据
* @return*/List<User> findByAll();用户持久层实现查询接口
新建用户持久层接口实现类UsersDaoImpl接口。
/*** 操作用户表持久层
*/public class UsersDaoImpl implements UsersDao {
/*** 查询所有用户
* @return*/@Overridepublic List<User> findByAll() {Connection conn =null;Statement s = null;ResultSet rs = null;List<User> userList = new ArrayList<>();try{conn = JdbcDruidUtil.getConnection();String sql = "select * from user";s = conn.createStatement();rs = s.executeQuery(sql);while(rs.next()){//手动orm映射
User u = new User();u.setId(rs.getInt("id"));u.setName(rs.getString("name"));u.setAge(rs.getInt("age"));userList.add(u);}}catch(Exception e){e.printStackTrace();}finally{JdbcDruidUtil.closeResource(s,conn);}return userList;}}5，编写用户管理前段页面
<%@ page isELIgnored="false"
contentType="text/html;charset=UTF-8"
language="java" %><html><head><title>用户管理</title><style>div{padding:20px 10px 0 10px;}.total_content{display: flex; /* 创建 Flexbox 布局
*/
对齐 */*/justify-content: center; /* 水平居中
align-items: center; /* 垂直居中对齐 }</style></head><body><div class="total_content"><h1 >用户管理系统</h1></div><div><table align="center" width="60%"
border="0" cellspacing="1" bgcolor="#000000"><tr bgcolor="#FFFFFF"><td>ID：</td><td><input type="text"
name="id" id="userId"/></td><td>姓名：</td><td><input type="text"
name="name" id="name"/></td><td>年龄：</td><td><input type="number"
name="age" id="age"/></td></tr><tr align="center"
bgcolor="#FFFFFF"><td colspan="6"><input type="button"
value="添加用户" onclick="addUser()" /><input type="button"
value="更新用户" onclick="updateUser()"/></td></tr></table> <hr/><table align="center" width="60%"
bgcolor="#000000" border="0" id="myTable"
cellpadding="0" cellspacing="1"><thead><tr align="center"
bgcolor="#FFFFFF"><td>ID</td><td>姓名</td><td>年龄</td><td>操作</td></tr></thead><tbody id="tBody"></tbody></table></div></body></html>6，编写用户查询Servlet
用户业务层新增查询接口
创建用户业务层接口类UsersService。
public interface UsersService {/*** 查询所有数据
* @return*/List<User> findByAll();}用户业务层实现查询接口实现类
创建用户业务层接口实现类UsersServiceImpl。
/*** 用户业务层
**/public class UsersServiceImpl implements
UsersService {/*** 查询全部用户
* @return*/@Overridepublic List<User> findByAll() {UsersDao usersDao = new UsersDaoImpl();return usersDao.findByAll();}}用户查询控制层编写
创建UserListServlet控制器类
@WebServlet("/user.do")public class UserListServlet extends
HttpServlet {@Overrideprotected void doGet(HttpServletRequest
req, HttpServletResponse resp) throws
ServletException, IOException {this.doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest
req, HttpServletResponse resp) throws
ServletException, IOException {String flag = req.getParameter("flag");switch (flag){case "getData":this.getData(req,resp);break;}}// 获取页面初始化数据
private void getData(HttpServletRequest
req, HttpServletResponse resp) throws
IOException {UsersService usersService = new
UsersServiceImpl();List<User> userList =
usersService.findByAll();ResultAjax success =
ResultAjax.success(userList);writerTopage(resp,success);}/*** 输出至页面方法
* @param resp* @param data* @throws IOException*/private void
writerTopage(HttpServletResponse resp,Object
data) throws IOException {String s = JSON.toJSONString(data);resp.setContentType("application/json");resp.setCharacterEncoding("UTF-8");PrintWriter pw = resp.getWriter();pw.print(s);pw.flush();pw.close();}}7，前段实现显示用户数据
Jquery的Ajax使用
实战用户查询功能
引入jquery-3.6.0.js
<script type="text/javascript" src="js/jquery
3.6.0.js"></script>初始化页面
<script>$(function() {//初始化用户数据
getData();});
</script>
发送get请求获取数据
<script>$(function() {//初始化用户数据
getData();});
// 获取页面初始化数据
function getData(){$.getJSON("user.do",{flag:"getData"},function (result) {listUser(result);});}</script> 渲染数据
<script>$(function() {//初始化用户数据
getData();});
// 获取页面初始化数据
function getData(){$.getJSON("user.do",{flag:"getData"},function (result) {listUser(result);});}// 遍历数据生成数据
function listUser(obj){var str ="";$.each(obj.data,function(){str+= "<tr align='center'
bgcolor=\"#FFFFFF\">" +"<td id='"+this.id+"'>"+this.id
+"</td>"+"<td>"+this.name+"</td>" +"<td>"+this.age+"</td>" +"<td><a href='#' >更新
</a> <a href='#'>删除 </a></td></tr>"});$("#tBody").prepend(str);}</script> 8，后端实现添加用户数据
用户持久层添加用户接口
新建用户持久层文件UsersDao接口。
/*** 添加用户信息
* @param user* @return*/int save(User user);用户持久层实现添加接口
新建用户持久层接口实现类UsersDaoImpl接口。
/*** 操作用户表持久层
*/public class UsersDaoImpl implements UsersDao {
/*** 添加用户
* @param user* @return*/@Overridepublic int save(User user) {Connection conn =null;PreparedStatement ps = null;ResultSet rs = null;Integer result = 0;try{conn = JdbcDruidUtil.getConnection();ps = conn.prepareStatement("insert into user (name,age) value (?,?)");ps.setString(1,user.getName());ps.setInt(2,user.getAge());result = ps.executeUpdate();}catch(Exception e){e.printStackTrace();}finally{JdbcDruidUtil.closeResource(rs,ps,conn);}return result;}}用户业务层新增添加接口
创建用户业务层接口类UsersService。
public interface UsersService {/*** 添加用户信息
* @param user* @return*/int save(User user);}用户业务层实现查询接口实现类
创建用户业务层接口实现类UsersServiceImpl。
/*** 用户业务层
**/public class UsersServiceImpl implements
UsersService {/*** 添加用户
* @param user* @return*/@Overridepublic int save(User user) {UsersDao usersDao = new UsersDaoImpl();return usersDao.save(user);}} 用户查询控制层编写
创建UserListServlet控制器类
@WebServlet("/user.do")public class UserListServlet extends
HttpServlet {@Overrideprotected void doGet(HttpServletRequest
req, HttpServletResponse resp) throws
ServletException, IOException {this.doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest
req, HttpServletResponse resp) throws
ServletException, IOException {String flag = req.getParameter("flag");switch (flag){case "getData":this.getData(req,resp);break;case "addUser":this.addUser(req,resp);break;}}// 获取页面初始化数据
private void getData(HttpServletRequest
req, HttpServletResponse resp) throws
IOException {UsersService usersService = new
UsersServiceImpl();List<User> userList =
usersService.findByAll();ResultAjax success =
ResultAjax.success(userList);writerTopage(resp,success);}/*** 处理添加用户请求* @param req* @param resp* @throws ServletException* @throws IOException*/private void addUser(HttpServletRequest
req, HttpServletResponse resp) throws
IOException {User user = this.createUser(req);UsersService usersService = new
UsersServiceImpl();int save = usersService.save(user);if (save > 0){writerTopage(resp,ResultAjax.success("添加成
功"));}else {writerTopage(resp,ResultAjax.error("添加成
功"));}}}9，前段实现新增用户数据
创建添加用户事件
// 用户添加
function addUser(){// 从页面中获取数据
var name = $("#name").val();var age = $("#age").val();if (name == ''){alert("请输入名字")return}if ( age == ''){alert("请输入年龄")return}var data = {name:name,age:age,flag : "addUser"}// 发送请求
$.post("user.do",data,function(result){console.log(result)if (result.code == 200){alert(result.message)location.reload()}});}
绑定事件
<%@ page isELIgnored="false"
contentType="text/html;charset=UTF-8"
language="java" %><html><head><title>用户管理</title><style>div{padding:20px 10px 0 10px;}.total_content{display: flex; /* 创建 Flexbox 布局
*/
对齐 */*/justify-content: center; /* 水平居中
align-items: center; /* 垂直居中对齐 }</style></head><body><div class="total_content"><h1 >用户管理系统</h1></div><div><table align="center" width="60%"
border="0" cellspacing="1" bgcolor="#000000"><tr bgcolor="#FFFFFF"><td>ID：</td><td><input type="text"
name="id" id="userId"/></td><td>姓名：</td><td><input type="text"
name="name" id="name"/></td><td>年龄：</td><td><input type="number"
name="age" id="age"/></td></tr><tr align="center"
bgcolor="#FFFFFF"><td colspan="6"><input type="button"
value="添加用户" onclick="addUser()" /><input type="button"
value="更新用户" onclick="updateUser()"/></td></tr></table> <hr/><table align="center" width="60%"
bgcolor="#000000" border="0" id="myTable"
cellpadding="0" cellspacing="1"><thead><tr align="center"
bgcolor="#FFFFFF"><td>ID</td><td>姓名</td><td>年龄</td><td>操作</td></tr></thead><tbody id="tBody"></tbody></table></div></body>10，后端实现更新用户数据
用户持久层更新用户接口
新建用户持久层文件UsersDao接口。
/*** 根据用户Id查询用户
* @param userid* @return*/User findUsersById(int userid);/*** 根据用户id 更新用户信息
* @param user* @return*/int updateByUser(User user);用户持久层实现更新接口
新建用户持久层接口实现类UsersDaoImpl接口。
/*** 操作用户表持久层
*/public class UsersDaoImpl implements UsersDao {
/*** 根据用户id查询用户信息
* @param userid* @return*/@Overridepublic User findUsersById(int userid) {Connection conn =null;PreparedStatement ps = null;ResultSet rs = null;User user = null;try{conn =
JdbcDruidUtil.getConnection();ps = conn.prepareStatement("select
* from user where id = ?");ps.setInt(1,userid);rs = ps.executeQuery();while(rs.next()){//手动orm映射
user = new User();user.setId(rs.getInt("id"));user.setName(rs.getString("name"));user.setAge(rs.getInt("age"));}}catch(Exception e){e.printStackTrace();}finally{JdbcDruidUtil.closeResource(rs,ps,conn);}return user;}/*** 更新用户
* @param user* @return*/@Overridepublic int updateByUser(User user) {Connection conn =null;PreparedStatement ps = null;ResultSet rs = null;try{conn =
JdbcDruidUtil.getConnection();ps = conn.prepareStatement("update
user set age = ? , name = ? where id = ?");ps.setInt(1,user.getAge());ps.setString(2,user.getName());ps.setInt(3,user.getId());return ps.executeUpdate();}catch(Exception e){e.printStackTrace();}finally{JdbcDruidUtil.closeResource(rs,ps,conn);}return 0;}}用户业务层新增添加接口
创建用户业务层接口类UsersService。
public interface UsersService {/*** 添加用户信息
* @param user* @return*/int save(User user);
}用户业务层实现查询接口实现类
创建用户业务层接口实现类UsersServiceImpl。
/*** 用户业务层
**/public class UsersServiceImpl implements
UsersService {/*** 添加用户
* @param user* @return*/@Overridepublic int save(User user) {UsersDao usersDao = new UsersDaoImpl();return usersDao.save(user);}} 11，用户更新控制层Servelt编写
创建UserListServlet控制器类
@WebServlet("/user.do")public class UserListServlet extends
HttpServlet {@Overrideprotected void doGet(HttpServletRequest
req, HttpServletResponse resp) throws
ServletException, IOException {this.doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest
req, HttpServletResponse resp) throws
ServletException, IOException {String flag = req.getParameter("flag");switch (flag){case "updateUser":this.updateUser(req,resp);breakcase "findByUserId":this.getUserId(req,resp);break; }}// 获取页面初始化数据
private void getData(HttpServletRequest
req, HttpServletResponse resp) throws
IOException {UsersService usersService = new
UsersServiceImpl();List<User> userList =
usersService.findByAll();ResultAjax success =
ResultAjax.success(userList);writerTopage(resp,success);}// 获取页面初始化数据private void getUserId(HttpServletRequest
req, HttpServletResponse resp) throws
IOException {Integer id =
Integer.valueOf(req.getParameter("id"));if (id == null){writerTopage(resp,ResultAjax.error("查询用户，用
户id为空"));return;}UsersService usersService = new
UsersServiceImpl();User usersById =
usersService.findUsersById(id);writerTopage(resp,ResultAjax.success(usersById));}/*** 处理更新用户请求
* @param req* @param resp* @throws IOException*/private void updateUser(HttpServletRequest req,HttpServletResponse resp) throws IOException{// 获取用户信息
User user = createUser(req);
UsersService usersService = new
UsersServiceImpl();// 根据用户id更新用户
int i =
usersService.updateByUser(user);if (i > 0){}}writerTopage(resp,ResultAjax.success("更新成功"));}else {writerTopage(resp,ResultAjax.error("更新失败"));}
}
}12，前段实现更新用户数据
创建更新用户事件
// 更新之前的数据选择
function preUpdateUser(userid){$.post("user.do",{id:userid,flag:"findByUserId"},function(result){if (result.code == 200){console.log(result)$("#userId").val(result.data.id);$("#name").val(result.data.name);$("#age").val(result.data.age);}})}// 用户更新
function updateUser(){// 从页面中获取数据
var userId = $("#userId").val();var name = $("#name").val();var age = $("#age").val();var data = {id : userId,name:name,age:age,flag:"updateUser"}// 发送请求
$.post("user.do",data,function(result){console.log(result)if (result.code == 200){alert(result.message)location.reload()}});}
绑定事件
// 遍历数据生成数据
function listUser(obj){var str ="";$.each(obj.data,function(){str+= "<tr align='center'
bgcolor=\"#FFFFFF\">" +"<td id='"+this.id+"'>"+this.id
+"</td>"+"<td>"+this.name+"</td>" +"<td>"+this.age+"</td>" +"<td><a href='#'
onclick='preUpdateUser("+this.id+")'>更新
</a> <a href='#' >删除 </a></td></tr>"});$("#tBody").prepend(str);}13，后端实现删除用户数据
用户持久层删除用户接口
新建用户持久层文件UsersDao接口。
/*** 根据用户id删除用户
* @param id 用户id* @return*/int deleteById(Integer id);用户持久层实现删除接口
新建用户持久层接口实现类UsersDaoImpl接口。
/*** 操作用户表持久层
*/public class UsersDaoImpl implements UsersDao {
/*** 根据用户id删除用户
* @param id 用户id* @return*/@Overridepublic int deleteById(Integer id) {Connection conn =null;PreparedStatement ps = null;ResultSet rs = null;try{conn =
JdbcDruidUtil.getConnection();ps = conn.prepareStatement("delete from user where id = ?");ps.setInt(1,id);return ps.executeUpdate();}catch(Exception e){e.printStackTrace();}finally{JdbcDruidUtil.closeResource(rs,ps,conn);}return 0;}}用户业务层删除接口
创建用户业务层接口类UsersService。
public interface UsersService {/*** 根据用户id删除用户
* @param id 用户id* @return*/int deleteById(Integer id);}用户业务层实现删除接口实现类
创建用户业务层接口实现类UsersServiceImpl。
/*** 用户业务层
**/public class UsersServiceImpl implements
UsersService {/*** 根据用户id删除用户
* @param id* @return*/@Overridepublic int deleteById(Integer id) {UsersDao usersDao = new UsersDaoImpl();return usersDao.deleteById(id);}} 用户删除控制层编写
创建UserListServlet控制器类
@WebServlet("/user.do")public class UserListServlet extends
HttpServlet {@Overrideprotected void doGet(HttpServletRequest
req, HttpServletResponse resp) throws
ServletException, IOException {this.doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest
req, HttpServletResponse resp) throws
ServletException, IOException {String flag = req.getParameter("flag");switch (flag){case "getData":this.getData(req,resp);break;case "addUser":this.addUser(req,resp);break;case "updateUser":this.updateUser(req,resp);break;case "delete":this.deleteUser(req,resp);break;case "findByUserId":this.getUserId(req,resp);break;}}// 获取页面初始化数据
private void getData(HttpServletRequest
req, HttpServletResponse resp) throws
IOException {UsersService usersService = new
UsersServiceImpl();List<User> userList =
usersService.findByAll();ResultAjax success =
ResultAjax.success(userList);writerTopage(resp,success);}/*** 处理添加用户请求
* @param req* @param resp* @throws ServletException* @throws IOException*/private void addUser(HttpServletRequest
req, HttpServletResponse resp) throws
IOException {User user = this.createUser(req);UsersService usersService = new
UsersServiceImpl();int save = usersService.save(user);if (save > 0){writerTopage(resp,ResultAjax.success("添加成
功"));}else {writerTopage(resp,ResultAjax.error("添加成
功"));}}/*** 处理删除用户请求
* @param req* @param resp* @throws ServletException* @throws IOException*/private void deleteUser(HttpServletRequest
req,HttpServletResponse
resp) throws ServletException, IOException {Integer id =
Integer.valueOf(req.getParameter("id"));if (id == null) {writerTopage(resp,
ResultAjax.error("id不能为空"));}
else {UsersService usersService = new
UsersServiceImpl();int i =
usersService.deleteById(id);if (i > 0){writerTopage(resp,
ResultAjax.success("删除成功"));}else{writerTopage(resp,
ResultAjax.success("删除失败"));}}}}14，前段页面删除用户数据
创建删除用户事件
// 删除用户
function deleteUser(userid){$.post("user.do",{id:userid,flag:"delete"},function(result){if (result.code == 200){alert(result.message)location.reload()}})}绑定删除事件
function listUser(obj){var str ="";$.each(obj.data,function(){str+= "<tr align='center'
bgcolor=\"#FFFFFF\">" +"<td id='"+this.id+"'>"+this.id
+"</td>"+"<td>"+this.name+"</td>" +"<td>"+this.age+"</td>" +"<td><a href='#'
onclick='preUpdateUser("+this.id+")'>更新
</a> <a href='#'
onclick='deleteUser("+this.id+")'>删除 </a></td></tr>"});$("#tBody").prepend(str);}