利用Ajax在页面加载数据

1.启动服务器后，在浏览器打开页面地址，显示如下

打开页面后在加载数据时先显示"数据加载中"
前端页面代码：

<tbody id="activityInfo">
		<tr><td>数据加载中</td></tr>
</tbody>

controller代码：

@RequestMapping("showActivity")
public String showActivity() {
	return "activity";
}

2.原来查询数据的方法上方加上注解@ResponseBody：将controller返回的对象转换为Json格式的对象

@RequestMapping("findActivity")
@ResponseBody
public List<Activity> findAllActivity() {
	List<Activity> list = activityService.findAllActivity();
	//model.addAttribute("activity",list);
	return list;
}

3.在前端页面添加文档就绪事件—页面加载完成后就会触发，触发显示数据

$(function(){
	//将tbody中原有的提示清空——删除数据加载中提示
	$("#activityInfo").empty();
	//调用显示数据的方法
	showActivity();
})

4.创建加载数据的方法——使用Ajax

function showActivity(){
	//url为controller中显示数据的方法的映射路径
	var url="findActivity";
	//由于此时是查询所有数据，不需要前端给后端传输数据，所以此时params为空字符串
	var params="";
	//调用JQuery中的getJSON异步加载数据，注意回调函数后面没有"()"
	$.getJSON(url,params,doHandleQueryResult);
}

5.创建异步加载中的回调函数

//参数results为controller中返回的结果
function doHandleQueryResult(results){
	//通过id属性找到tbody
	var tbody=$("#activityInfo");
	for(var i=0;i<results.length;i++){
		//创建行
		var tr=createRows(results[i]);
		//在tbody中添加行
		tbody.append(tr);
	}
}

6.添加行：

function createRows(result){
	//使用``会自动将``中的转换为String类型，或是可以直接用字符串样式进行拼接，但
	//使用``会更方便
	return `<tr>
		<td>${result.id}</td>
		<td>${result.title}</td>
		<td>${result.category}</td>
		<td>${result.startTime}</td>
		<td>${result.endTime}</td>
		<td>${result.remark}</td>
		<td>${result.state}</td>
		<td>${result.createdTime}</td>
		<td>${result.createdUser}</td>
		<td>
	</tr>`;
}

7.最后的结果