Java实现产品保存后实时更新同页面列表方案求助

我来帮你搞定这个问题！其实用JSON实现保存后产品列表的局部更新并不复杂，咱们一步步调整代码就行：

第一步：先修复JSP里的HTML结构问题 #

你当前的product.jsp里，<div>直接放在<table>里面是不符合HTML规范的，浏览器解析会出问题，咱们把它换成<tbody>并加上ID，方便后续JS操作：

<table>
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Description</th>
    <th>Price</th>
  </tr>
  <!-- 替换原来的div为带ID的tbody -->
  <tbody id="productTableBody">
    <c:forEach items="${products}" var="product">
      <tr>
        <td>${product.id}</td>
        <td><c:out value="${product.name}" /></td>
        <td><c:out value="${product.description}" /></td>
        <td><c:out value="${product.price}" /></td>
      </tr>
    </c:forEach>
  </tbody>
</table>

同时，修正表单的action路径（后面Servlet映射会调整，先对应上）：

<form id="form1" action="${pageContext.request.contextPath}/products" method="post">

第二步：给Servlet添加JSON序列化支持 #

咱们需要用Jackson库来把Java对象转成JSON格式，如果你是手动管理jar包，需要下载这三个文件放到WEB-INF/lib下：

• jackson-databind.jar
• jackson-core.jar
• jackson-annotations.jar

如果是Maven项目，直接加依赖：

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.15.2</version>
</dependency>

然后修改products.java的doPost方法，让它返回JSON格式的响应，包含保存状态和新添加的产品（或者整个产品列表）：

import com.fasterxml.jackson.databind.ObjectMapper;
import java.util.HashMap;
import java.util.Map;

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");
    ObjectMapper objectMapper = new ObjectMapper();
    Map<String, Object> responseData = new HashMap<>();

    try {
        Product p = new Product();
        p.setName(request.getParameter("pname"));
        p.setDescription(request.getParameter("pdesc"));
        p.setPrice(new BigDecimal(request.getParameter("price")));

        int saveResult = productDAO.Save(p);
        if (saveResult > 0) {
            // 假设你的DAO的Save方法返回新增产品的ID，然后通过ID查询完整的产品对象
            Product newProduct = productDAO.getById(saveResult); // 需要你实现这个DAO方法
            responseData.put("status", "success");
            responseData.put("newProduct", newProduct);
        } else {
            responseData.put("status", "fail");
            responseData.put("message", "saved fail");
        }
    } catch (Exception e) {
        e.printStackTrace();
        responseData.put("status", "error");
        responseData.put("message", e.getMessage());
    }

    // 把响应数据转成JSON写入输出流
    objectMapper.writeValue(response.getWriter(), responseData);
}

第三步：修改前端JS，接收JSON并更新列表 #

现在调整JSP里的JS代码，让它接收JSON响应，然后动态把新添加的产品行插入到表格里：

$(document).ready(function () {
    $('#form1').submit(function (e) {
        e.preventDefault(); // 阻止表单默认提交行为
        const $form = $(this);
        
        $.post($form.attr('action'), $form.serialize(), function (response) {
            if (response.status === 'success') {
                $('#result').text('保存成功').css('color', 'green');
                // 动态生成新的表格行
                const newRow = `
                    <tr>
                        <td>${response.newProduct.id}</td>
                        <td>${response.newProduct.name}</td>
                        <td>${response.newProduct.description}</td>
                        <td>${response.newProduct.price}</td>
                    </tr>
                `;
                // 把新行追加到表格末尾
                $('#productTableBody').append(newRow);
            } else if (response.status === 'fail') {
                $('#result').text(response.message).css('color', 'red');
            } else {
                $('#result').text(`错误：${response.message}`).css('color', 'red');
            }
            // 清空表单输入框
            $('#pname').val('');
            $('#pdesc').val('');
            $('#price').val('');
        }, 'json'); // 指定接收的响应格式为JSON
    });
});

第四步：修正web.xml的Servlet映射 #

你当前的web.xml里servlet-mapping的url-pattern是空的，这会导致Servlet成为默认Servlet，容易出问题，改成明确的路径：

<servlet-mapping>
    <servlet-name>products</servlet-name>
    <url-pattern>/products</url-pattern>
</servlet-mapping>

备选方案：如果不想查询单个产品，直接返回整个列表 #

如果你的DAO不方便查询单个新增产品，也可以在保存成功后返回整个产品列表，然后重新渲染整个表格：

• Servlet里修改成功分支：

if (saveResult > 0) {
    List<Product> allProducts = productDAO.list();
    responseData.put("status", "success");
    responseData.put("products", allProducts);
}

• 前端JS修改成功分支：

if (response.status === 'success') {
    $('#result').text('保存成功').css('color', 'green');
    // 清空表格tbody，重新渲染所有行
    const $tbody = $('#productTableBody');
    $tbody.empty();
    response.products.forEach(product => {
        const row = `
            <tr>
                <td>${product.id}</td>
                <td>${product.name}</td>
                <td>${product.description}</td>
                <td>${product.price}</td>
            </tr>
        `;
        $tbody.append(row);
    });
}

注意事项 #

• 确保你的Product类有公共的getter方法，Jackson需要通过这些方法来读取属性生成JSON。
• 如果你的Save方法不返回新增产品的ID，那备选方案更适合你。

这样修改后，每次保存产品成功，页面就会自动更新产品列表，不需要刷新整个页面啦！

内容的提问来源于stack exchange，提问作者Dil.