首先管制层代码
@ResponseBody注解通知spring 框架将返回值对象转换为json格局字符串

@Controller@RequestMapping("/activity/")public class ActivityController {     @Autowired     private ActivityService activityService;     /**      *     基于此办法返回activity页面      * @return      */     @RequestMapping("doActivityUI")     public String doActivityUI() {         return "activity01";     }           @RequestMapping("doFindActivitys")     @ResponseBody //通知spring 框架将返回值对象转换为json格局字符串     public List<Activity> doFindActivitys()throws Exception{          Thread.sleep(5000);         return activityService.findActivitys();     }     }

客户端
首先要在<body>标签最下方引入jquery.min.js文件，因为要应用jQuery

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><div>    <h1>The Activity page01</h1>        <table class="table">            <thead>                <tr>                    <th>id</th>                    <th>title</th>                    <th>category</th>                    <th>start time</th>                    <th>end time</th>                    <th>state</th>                    <th>createdTime</th>                </tr>            </thead>            <tbody id="tbodyId">                <tr>                    <td colspan="7">数据正在踊跃的加载中......</td>                </tr>            </tbody>        </table>        </div>     <script type="text/javascript" src="/jquery/jquery.min.js"></script>        <script type="text/javascript">        //首先是函数的自调用        (function(){            //1首先定义url            let url="/activity/doFindActivitys";            //2定义参数，这里为空            let params={};            //3发送异步申请，这里是采纳的是$.ajax（借助jquery中的ajax函数,向服务端发送异步申请获取流动信息）            $.ajax({                url:url,//url                data:params,//参数                dataType:"json",//字符串格局                success:function(result){                    doHandleQueryResult(result);//要将取到的result后果出现到页面上                }                            });        })()        function doHandleQueryResult(result){             //解决服务端返回的流动信息,迭代result,并将result内容填充tbody地位             //1.获取tbody对象            var tBody=$("#tbodyId");                         tBody.empty();//并清空原有内容            //2.迭代result,将流动信息追加到tbody中                           result.forEach(item=>{//这里的item为一个变量,代表数组中某一个元素                //为tBody中追加新的内容                tBody.append(                    `<tr>                    <td>${item.id}</td>                    <td>${item.title}</td>                    <td>${item.category}</td>                    <td>${item.startTime}</td>                    <td>${item.endTime}</td>                    <td>${item.state==1?'无效':'已完结'}</td>                    <td>${item.createdTime}</td>                    </tr>`                                        );                                            });                    }                </script></body></html>