首先管制层代码
@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>