解决使用Ajax删除表格数据需要手动刷新问题

Posted 2021-06-27 花伤情犹在

使用Ajax交换数据后不会自动刷新

如图：

使用c:foreach遍历集合：

1. 给父级标签tr的id设置为当前删除的行id：<tr id="${list.id}">
2. 在需要删除的按钮位置添加点击事件,函数内传入当前删除的行id:x(${list.id})

<c:forEach items="${list}" var="list" varStatus="state">
               <%--判断行号-(偶数行)--%>
               <c:if test="${state.count %2 == 0}" var="even">
                   <tr id="${list.id}">
               </c:if>
               <%--判断行号-(奇数行)--%>
               <c:if test="${!even}" var="odd">
                   <tr id="${list.id}" style="background-color: darkgray">
               </c:if>
                   <td>${list.id}</td>
                   <td>${list.districtName}</td>
                   <td>${list.monitorTime}</td>
                   <td>${list.rain}</td>
                   <td>${list.monitoringStation}</td>
                   <td>${list.monitoringAddress}</td>
                   <td><a href="javascript:;" id="delete"  onclick="x(${list.id})">删除</a></td>
               </tr>
</c:forEach>

使用$.ajax异步传输：
删除按钮触发函数传入了删除行的id，然后通过id获取到父级元素tr将其删除：$("#"+id).remove();

function x(id) {
        $.ajax({
            url:"deleteServlet",
            async:"true",
            data:{"id":id},
            type:"post",
            dataType:"json",
            success:function (result) {
                if (result){
                    alert("删除成功！")
                    $("#"+id).remove();
                }else {
                    alert("删除失败！")
                }
            }
        })
    }

效果：