打开浏览器，结据进在地址栏敲下 localhost:8080/user/list，合hl和页面上立刻弹出一张表格，对数里面装着数据库里所有用户记录。行增点“删除”按钮，删改那行数据瞬间消失，结据进页面连刷新都没刷新。合hl和这就是对数 JavaWeb 配合 HTML 和 AJAX 做增删改查的日常效果——没有整页重载的闪烁，只有局部 DOM 的行增精准替换。

先看后端。删改Servlet 还是结据进那个 Servlet，但返回的合hl和不再是转发到 JSP 的请求，而是对数直接写 JSON。比如 UserServlet 里，行增doGet 方法判断 action 参数：如果是删改 list，就调 UserDao.findAll() 拿到 List<User>，再用 Gson 转成字符串，response.setContentType("application/json;charset=utf-8")，然后 writer.write(json)。一个简单的查询接口就完成了。不用配 struts，不用引 spring mvc，原生 Servlet 加一个 Gson 的 jar 包足够。

前端这边，HTML 只负责骨架。一个 table，thead 里放列名，tbody 留空。旁边一个 form，三个 input 对应姓名、年龄、邮箱，加一个“添加”按钮。没有 action，没有 method，按钮绑的是 onclick="addUser()"。

AJAX 是中间的粘合剂。用原生 XMLHttpRequest 也行，用 fetch 也行，我习惯用 fetch，代码短。查询函数长这样：

function loadUsers() {  fetch('user?action=list') .then(res => res.json()) .then(data => {  let html = ''; data.forEach(u => {  html += `<tr> <td>${ u.id}</td> <td>${ u.name}</td> <td>${ u.age}</td> <td>${ u.email}</td> <td> <button onclick="editUser(${ u.id})">改</button> <button onclick="delUser(${ u.id})">删</button> </td> </tr>`; }); document.querySelector('tbody').innerHTML = html; }); } 

删除更直接。delUser 函数里发一个 fetch('user?action=delete&id=' + id)，后端 UserDao.delete(id) 执行 DELETE FROM user WHERE id=?，返回 { "success":true}。前端拿到结果后重新调一次 loadUsers()，表格自动更新。不用手动删 DOM，因为数据源变了，视图跟着变。

添加和修改共用同一个表单。点击“添加”时，收集 input 的值，fetch 发 POST 到 user?action=add，body 里放 JSON 字符串。后端用 request.getReader() 读 body，Gson 反序列化成 User 对象，再调 UserDao.insert(user)。修改则是先根据 id 查出一条记录，把值填回 input，点保存时发 PUT 到 user?action=update。RESTful 风格不是必须的，用 action 参数区分也完全可行，看团队习惯。

有一个细节容易踩坑：AJAX 请求默认不带 cookie，如果后端用 session 做登录拦截，需要在 fetch 里加 credentials: 'include'。另外，POST 请求的 Content-Type 要设成 application/json，否则后端读 body 可能拿到空字符串。我见过有人用 form 表单的 enctype 去发 AJAX，结果 Servlet 里 request.getParameter 取不到值，卡了半天。

数据库层用 JDBC 还是连接池？小项目直接 DriverManager 就行。UserDao 里写一个 getConnection()，每次 new 一个 Connection。虽然性能一般，但代码量少，调试直观。等并发上来了再换 Druid 或 HikariCP，那是后话。

整个流程跑通后，你会发现最麻烦的不是技术，而是字段映射。比如前端传的 age 是字符串 "25"，后端 User 类的 age 是 int，Gson 反序列化时如果 JSON 里是 "25" 而不是 25，会抛 JsonSyntaxException。解决办法要么前端 parseInt，要么后端用 Integer 接收再手动转。这种小坑，文档里不写，只有自己写一遍才知道。

最后说一句，这套组合虽然老，但胜在透明。没有框架的魔法，每一行请求和响应都看得见。对于理解 HTTP 和前后端交互，比直接上 Vue + Spring Boot 更扎实。