ajax实现前端页面多表格元素的局部刷新

我的项目需求是在前端页面实现几个同类型表格元素的局部刷新，也就是后端数据库值一变，页面就跟着局部刷新。

(1)后端代码:

@RequestMapping(value = "/flush")
@ResponseBody
public Map<Integer, Object> flush() {
    List<Task> taskList = null;
    try {
        taskList = taskService.getAllTask();
        if (taskList == null || taskList.isEmpty())
            taskList = new ArrayList<>();
    } catch (Exception e) {
        e.printStackTrace();
    }
    Map<Integer, Object> map = new HashMap<>();
    for (Task task:taskList){
        map.put(task.getId(), task.getStatus());
    }
    return  map;//map返回的是我数据库的(key:id, value:status);
}

(2)js代码：

setInterval(function flush(){
    $.ajax({
        type: "get",
        url: "/flush",
        async: false,
        //dataType: "json",
        success: function (response) {
            for (var key in response){ //遍历获取key和value，通过id找到页面对应的元素（jsp）
                var id = "#status"+key.toString();
                $(id).empty();
                $(id).append(response[key]);
            }
        }
    })
},1000);

(3)jsp对应标签：

<td th:id="status+${task.id}" th:text="${task.status}"</td> //这里每个表格对应各自的id,id与我数据库id相对应