Ajax技术详解

Ajax简介

Ajax 即 "Asynchronous Javascript And XML"（异步 JavaScript 和 XML），是指一种创建交互式、快速动态应用的网页开发技术，无需重新加载整个网页的情况下，能够更新页面局部数据的技术。

为什么要使用Ajax技术

在这里插入图片描述
通过在后台与服务器进行少量数据交换，Ajax 可以使页面实现异步更新。这意味着可以在不重新加载整个页面的情况下，对页面的某部分进行更新。

Ajax的应用场景

用户名检测

注册用户时，通过 Ajax 的形式，动态检测用户名是否被占用。
在这里插入图片描述

搜索提示

当输入搜索关键字时，通过 Ajax 的形式，动态加载搜索提示列表。
在这里插入图片描述

数据分页显示

当点击页码值的时候，通过 ajax 的形式，根据页码值动态刷新表格的数据。
在这里插入图片描述

数据的增删改查

**数据的添加、删除、修改、查询操作，都需要通过 ajax 的形式，来实现数据的交互。
**

JSON简介

JSON(JavaScript Object Notation) 是一种**基于字符串的轻量级的数据交换格式。**易于人阅读和编写，同时也易于机器解析和生成。
JSON是JavaScript数据类型的子集。

为什么要使用JSON

在这里插入图片描述

XML简介

XML 可扩展标记语言。
XML 被设计用来传输和存储数据。
XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。
比如说我有一个学生数据： name = “zhangsan” ; age = 22; gender = “男” ;
用 XML 表示：

<student><name>zhangsan</name><age>22</age><gender>男</gender>
</student>

用 JSON 表示：

{"name":"zhangsan","age":22,"gender":"男"
}

在JSON未出现之前在Ajax中对于数据传递方式，会使用XML作为主要数据格式来传输数据。直到JSON出现后逐渐放弃使用
XML作为数据传输格式。JSON 比 XML 更小、更快，更易解析。https://www.json.cn/

JSON格式的特征

JSON是按照特定的语法规则所生成的字符串结构。

大括号表示JSON的字符串对象。{ }
属性和值用冒号分割。{“属性”:“value”}
属性和属性之间用逗号分割。{“属性”:“value”,“属性”:“value”,…}
中括号表示数组。[{“属性”:“value”…},{“属性”:“value”…}]

JSON的6种数据类型

string：字符串，必须要用双引号引起来。
number：数值，与JavaScript的number一致
object：JavaScript的对象形式，{key:value }表示方式，可嵌套。
array：数组，JavaScript的Array表示方式[ value ]，可嵌套。
true/false：布尔类型，JavaScript的boolean类型。
null：空值，JavaScript的null。

FastJson是什么

Fastjson 是阿里巴巴的开源JSON解析库，它可以解析 JSON 格式的字符串，支持将 Java Bean 序列化为 JSON 字符串，也可以从 JSON 字符串反序列化到 JavaBean。

Fastjson使用场景

Fastjson已经被广泛使用在各种场景，包括cache存储、RPC通讯、MQ通讯、网络协议通讯、Android客户端、Ajax服务器处理程序等等。

FastJson优点

1、速度快
Fastjson相对其他JSON库的特点是快，从2011年fastjson发布1.1.x版本之后，其性能从未被其他Java实现的JSON库超越。
2、使用广泛
Fastjson在阿里巴巴大规模使用，在数万台服务器上部署，Fastjson在业界被广泛接受。在2012年被开源中国评选为最受欢迎
的国产开源软件之一。
3、测试完备
fastjson有非常多的testcase，在1.2.11版本中，testcase超过3321个。每次发布都会进行回归测试，保证质量稳定。

常用的 JSON 解析类库

Gson: 谷歌开发的 JSON 库，功能十分全面
FastJson: 阿里巴巴开发的 JSON 库，性能十分优秀。
Jackson: 社区十分活跃且更新速度很快。被称为“最好的Json解析器”

下载和使用FastJson

序列化和反序列化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);
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);

解析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);

使用注解控制序列化和反序列化
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初体验

在这里插入图片描述

XMLHttpRequest对象

通过XMLHttpRequest对象来向服务器发送异步请求，从服务器获取数据。然后JavaScript来操作DOM而更新页面。
XMLHttpRequest是ajax的核心机制，它是IE5中首先引入的，是一种支持异步请求的技术。
也就是JavaScript可以及时的向服务器提出请求并及时响应。而不阻塞用户。达到无刷新效果。

Ajax的使用步骤

创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

给定请求方式以及请求地址

xhr.open("get","http://v1.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=");

后端服务 ip地址+端口号+资源路径

发送请求

xhr.send();

获取服务器端给客户端的响应数据

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实战案例_需求说明

在这里插入图片描述

需求

创建User类，包含id、name、age属性
在用户管理页面中通过Ajax技术完成对用户数据载入、添加用户、更新用户、删除用户操作。

项目结构

在这里插入图片描述

common（公共实体）：用于存放公共实体类。
dao（数据访问层）：用于存放应用程序的数据访问类，负责与数据库或其他数据源进行交互。
pojo（模型层）：用于存放应用程序的数据模型类，表示应用程序中的实体对象。
service（服务层）：用于存放应用程序的服务类，负责实现业务逻辑。
servlet （控制器层）：用于存放应用程序的控制器类，负责处理请求和控制应用程序的流程。
utils（工具类）：用于存放应用程序的工具类，包含各种通用的辅助方法。

Ajax实战案例_搭建环境

数据库创建用户表

# 创建用户表
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 Integer getAge() {        return age;    }public void setAge(Integer age) {        this.age = age;    }@Override    public 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);    }}

Ajax实战案例_编写据库连接工具##

创建数据库连接信息文件

在src目录下创建 druid.properties ,基于Druid连接池获取数据库连接工具类。

driverClassName=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/test?useSSL=falseusername=root
password=123456
initialSize=10
maxActive=20

工具类

/*** 数据库连接工具类*/
public class JdbcUtils {// 数据库连接池对象private static DataSource dataSource;static {try {// 读取配置文件字节输入流对象InputStream is = JdbcUtils.class.getClassLoader().getResourceAsStream("druid.properties");// 创建properties对象Properties properties = new Properties();// 加载配置文件properties.load(is);// 创建出连接池对象dataSource = DruidDataSourceFactory.createDataSource(properties);} catch (Exception e) {e.printStackTrace();}}// 获取数据库连接对象public static Connection getConnection(){Connection connection = null;try {connection = dataSource.getConnection();} catch (SQLException e) {throw new RuntimeException(e);}return connection;}// 关闭连接对象public static void closeConnection(Connection connection){if (connection != null){try {connection.close();} catch (SQLException e) {throw new RuntimeException(e);}}}// 释放资源public static void closeResource(Connection connection, Statement statement) throws SQLException {// 先关闭statementif (statement != null){statement.close();}// 在关闭connectionif (connection != null){connection.close();}}}

Ajax实战案例_ 后端实现查询用户数据

用户持久层新增查询接口

新建用户持久层文件UsersDao接口。

/*** 查询所有用户数据* @return*/List<User> findByAll();

用户持久层实现查询接口

新建用户持久层接口实现类UsersDaoImpl接口。

/*** 用户持久实现类*/
public class UserDaoImpl implements UserDao {/*** 查询所有用户* @return*/@Overridepublic List<User> findByAll() {Connection connection = null;Statement statement = null;List<User> users = new ArrayList<>();try {// 获取数据连接connection = JdbcUtils.getConnection();// 创建statementstatement = connection.createStatement();// 编写查询sql语句String sql = "select * from user";// 执行ResultSet resultSet = statement.executeQuery(sql);// 拿出来数据while (resultSet.next()){User user = new User();// 序号int id = resultSet.getInt("id");// 名字String name = resultSet.getString("name");// 年纪int age = resultSet.getInt("age");user.setId(id);user.setName(name);user.setAge(age);users.add(user);}} catch (SQLException e) {throw new RuntimeException(e);}finally {try {JdbcUtils.closeResource(connection,statement);} catch (SQLException e) {throw new RuntimeException(e);}}return users;}

Ajax实战案例_ 编写用户管理前端页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>用户管理</title><style>div{padding: 20px 10px 0 10px;}.total_conent{/*创建弹性盒子部署*/display: flex;/*水平居中布局*/justify-content: center;/*垂直居中对其*/align-items: center;}</style>
</head>
<body><div class="total_conent"><h1>用户管理系统</h1>
</div><div><table align="center" width="60%" border="1"><tr><td>ID:</td><td><input type="text" name="id" id="UserId"></td><td>名字：</td><td><input type="text" name="name" id="name" placeholder="请输入名字"></td><td>年龄：</td><td><input type="number" name="age" id="age" placeholder="请输入年龄"></td></tr><tr align="center" ><td colspan="6"><button onclick="save()">添加用户</button><button onclick="userupdate()">更新用户</button></td></tr></table><hr><table align="center" width="60%" border="1" id="myTable"><tr><td>ID</td><td>名字</td><td>年龄</td><td>操作</td></tr></table>
</div>
</body>
</html>

Ajax实战案例_ 编写用户查询Servlet

在这里插入图片描述

用户业务层新增查询接口

创建用户业务层接口类UsersService。

public interface UsersService {      
/**     
* 查询所有数据     
* @return     
*/   List<User> findByAll();}

用户业务层实现查询接口实现类

创建用户业务层接口实现类UsersServiceImpl。

public class UserServiceImpl implements IUserService {/*** 查询所有用户* @return*/@Overridepublic List<User> findByAll() {UserDao userDao = new UserDaoImpl();return userDao.findByAll();}

用户查询控制层编写

创建UserListServlet控制器类

@WebServlet("/user.do")
public class UserListServlet extends HttpServlet {@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");        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();    }  }

Ajax实战案例_前端实现显示用户数据

在这里插入图片描述

Jquery的Ajax使用

在JQuery中提供了对Ajax的封装，让我们在使用Ajax技术时变得更加容易。在JQuery中提供了很多的基于Ajax发送异步请求的方法，如： $ .ajax()、$ .get()、$ .post()、$.getJSON()。

jQuery的宗旨：写的更少，做得更多！jQuery官网地址：http://jquery.com/

最常用的三种方法如下：

$ .get() 向服务器获取数据
$ .post() 向服务器发送请求
$ .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>&nbsp;&nbsp;<a href='#'>删除 </a></td></tr>"        
});        
$("#tBody").prepend(str);    
}</script>

Ajax实战案例_后端实现添加用户数据

用户持久层添加用户接口

新建用户持久层文件UsersDao接口。

 /*** 添加用户* @param user* @return*/Integer save(User user);

用户持久层实现添加接口

新建用户持久层接口实现类UsersDaoImpl接口。

public class UserDaoImpl implements UserDao {
/*** 添加用户   谁可以操作数据库    持久层  dao* @param user* @return*/@Overridepublic Integer save(User user) {// 获取连接Connection connection = null ;PreparedStatement ps = null;String sql = "insert into user (name , age) value(?,?)";Integer result = 0;try {connection = JdbcUtils.getConnection();ps = connection.prepareStatement(sql);ps.setString(1,user.getName());ps.setInt(2,user.getAge());result =  ps.executeUpdate();} catch (SQLException e) {throw new RuntimeException(e);}finally {try {JdbcUtils.closeResource(connection,ps);} catch (SQLException e) {throw new RuntimeException(e);}}return result;}}

用户业务层新增添加接口

创建用户业务层接口类UsersService。

*** 添加用户* @param user* @return*/Integer save(User user);

用户业务层实现查询接口实现类

创建用户业务层接口实现类UsersServiceImpl。

/*** 用户业务层实现类   控制层 -》 业务层  -》 持久层*/
public class UserServiceImpl implements IUserService {/*** 添加用户* @param user* @return*/@Overridepublic Integer save(User user) {UserDao userDao = new UserDaoImpl();return userDao.save(user);}

用户查询控制层编写

创建UserListServlet控制器类


package com.itbaizhan.servlet;
import com.alibaba.fastjson.JSON;
import com.itbaizhan.common.ResultAjax;
import com.itbaizhan.pojo.User;
import com.itbaizhan.service.IUserService;
import com.itbaizhan.service.impl.UserServiceImpl;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.List;@WebServlet("/user.do")
public class UserListServlet1 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 {IUserService usersService = new UserServiceImpl();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();}}
/**     
* 处理添加用户请求
* @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("添加成功"));        
}    
}  }

Ajax实战案例_前端实现新增用户数据

创建添加用户事件

// 添加用户function addUser(){// 1、获取用户名var name = $("#name").val()if (name == ''){alert("请输入名字")return}// 2、获取用户年纪var age = $("#age").val()if (age == ''){alert("请输入年龄")return}var data = {name:name,age:age,flag:"save"}
//发送请求$.getJSON("user.do",data,function (result){if (result.code == 200){alert("添加成功")location.reload()}})}

绑定事件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>用户管理</title><style>div{padding: 20px 10px 0 10px;}.total_conent{/*创建弹性盒子部署*/display: flex;/*水平居中布局*/justify-content: center;/*垂直居中对其*/align-items: center;}</style>
</head>
<body><div class="total_conent"><h1>用户管理系统</h1>
</div><div><table align="center" width="60%" border="1"><tr><td>ID:</td><td><input type="text" name="id" id="UserId"></td><td>名字：</td><td><input type="text" name="name" id="name" placeholder="请输入名字"></td><td>年龄：</td><td><input type="number" name="age" id="age" placeholder="请输入年龄"></td></tr><tr align="center" ><td colspan="6"><button onclick="save()">添加用户</button><button onclick="userupdate()">更新用户</button></td></tr></table><hr><table align="center" width="60%" border="1" id="myTable"><tr><td>ID</td><td>名字</td><td>年龄</td><td>操作</td></tr></table>
</div>
</body>

Ajax实战案例_后端实现更新用户数据

用户持久层更新用户接口

新建用户持久层文件UsersDao接口。

/*** 根据用户id查询用户信息* @param id 用户id* @return*/User findById(Integer id);/*** 根据用户id更新用户数据* @param user* @return*/Integer updateById(User user);

用户持久层实现更新接口

新建用户持久层接口实现类UsersDaoImpl接口。

/*** 根据用户id查询用户* @param id 用户id* @return*/@Overridepublic User findById(Integer id) {User user = null;Connection connection = null;PreparedStatement ps = null;try {// 1、创建连接connection = JdbcUtils.getConnection();String sql = "select * from user where id = ?";ps = connection.prepareStatement(sql);ps.setInt(1,id);// 2、执行sql语句ResultSet resultSet = ps.executeQuery();// 3、获取数据while (resultSet.next()){user = new User();Integer userid = resultSet.getInt("id");String name = resultSet.getString("name");int age = resultSet.getInt("age");user.setId(userid);user.setName(name);user.setAge(age);}} catch (SQLException e) {throw new RuntimeException(e);}finally {try {JdbcUtils.closeResource(connection,ps);} catch (SQLException e) {throw new RuntimeException(e);}}return user;}/*** 根据用户id更新用户信息* @param user* @return*/@Overridepublic Integer updateById(User user) {Connection connection = null;PreparedStatement ps = null;int result = 0;try {// 1、创建连接connection = JdbcUtils.getConnection();String sql = "update user set name = ? , age = ?  where id = ?";ps = connection.prepareStatement(sql);ps.setString(1,user.getName());ps.setInt(2,user.getAge());ps.setInt(3,user.getId());// 2、发送语句result = ps.executeUpdate();} catch (SQLException e) {throw new RuntimeException(e);}finally {try {JdbcUtils.closeResource(connection,ps);} catch (SQLException e) {throw new RuntimeException(e);}}return result;}

用户业务层新增添加接口

创建用户业务层接口类UsersService。

  /*** 添加用户* @param user* @return*/Integer save(User user);

用户业务层实现查询接口实现类

创建用户业务层接口实现类UsersServiceImpl。

public class UserServiceImpl implements IUserService {/*** 添加用户* @param user* @return*/@Overridepublic Integer save(User user) {UserDao userDao = new UserDaoImpl();return userDao.save(user);}
}

Ajax实战案例_用户更新控制层Servlet编写

创建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("更新失败"));}}
}

前端实现更新用户数据

创建更新用户数据事件

// 更新之前的数据选择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='#' οnclick='preUpdateUser("+this.id+")'>更新</a>&nbsp;&nbsp;<a href='#' >删除 </a></td></tr>"});$("#tBody").prepend(str);}

Ajax实战案例_后端实现删除用户数据

用户持久层删除用户接口
新建用户持久层文件UsersDao接口。

 /*** 根据用户id删除用户* @param id* @return*/Integer 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);
}

用户持久层实现删除接口

新建用户持久层接口实现类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("删除失败"));}}}}

Ajax实战案例_前端页面删除用户数据

创建删除用户事件

 // 删除用户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='#' οnclick='preUpdateUser("+this.id+")'>更新</a>&nbsp;&nbsp;<a href='#' οnclick='deleteUser("+this.id+")'>删除 </a></td></tr>"});$("#tBody").prepend(str);}