需求
页面上有一个“获取”按钮。当点击按钮时，从后端获取数据，并通过表格显示在页面上。
环境
- Ubuntu 22.04
- VSCode 1.67.2
- jQuery v3.6.0
- Bootstrap 5.2
- art-template 4.13.2
- IntelliJ IDEA 2022.1.3
- Firefox 102.0.1
准备
创建SpringBoot项目 test0709 ，添加Spring Web依赖。
创建Controller MyController ：
@RestController
public class MyController {
private List<Person> doGetPersons() {
List<Person> list = new ArrayList<Person>();
list.add(new Person("郭靖", "男", 50, "降龙十八掌"));
list.add(new Person("黄蓉", "女", 45, "打狗棒法"));
list.add(new Person("杨过", "男", 30, "黯然销魂掌"));
list.add(new Person("张无忌", "男", 20, "乾坤大挪移"));
list.add(new Person("段誉", "男", 18, "六脉神剑"));
list.add(new Person("令狐冲", "男", 22, "独孤九剑"));
return list;
}
@CrossOrigin(origins = "*")
@RequestMapping(value = "/personsCrossOrigin", method = RequestMethod.GET)
public MyResponse getPersonsCrossOrigin() {
MyResponse result = new MyResponse();
List<Person> list = doGetPersons();
result.setList(list);
result.setMessage("success");
return result;
}
}
注：这里加上了 @CrossOrigin 注解，否则会因为同源策略导致浏览器无法接收数据，详见我另一篇文档。
运行程序，测试一下效果：
➜ ~ curl --silent "http://localhost:8080/personsCrossOrigin" | jq .
{
"list": [
{
"name": "郭靖",
"sex": "男",
"age": 50,
"kongfu": "降龙十八掌"
},
{
"name": "黄蓉",
"sex": "女",
"age": 45,
"kongfu": "打狗棒法"
},
{
"name": "杨过",
"sex": "男",
"age": 30,
"kongfu": "黯然销魂掌"
},
{
"name": "张无忌",
"sex": "男",
"age": 20,
"kongfu": "乾坤大挪移"
},
{
"name": "段誉",
"sex": "男",
"age": 18,
"kongfu": "六脉神剑"
},
{
"name": "令狐冲",
"sex": "男",
"age": 22,
"kongfu": "独孤九剑"
}
],
"message": "success"
}
原生Ajax
创建 0710_1.html 文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn1">获取</button>
<div id="div1"></div>
<script>
var btn1 = document.getElementById('btn1');
btn1.onclick = function () {
var xhr = new XMLHttpRequest()
xhr.open('GET', "http://192.168.1.88:8080/personsCrossOrigin");
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
var list = data.list;
var rows = [];
for (var i = 0; i < list.length; i++) {
var str = '<tr><th>' + (i + 1) + '</th><td>' + list[i].name + '</td><td>' + list[i].sex
+ '</td><td>' + list[i].age + '</td><td>' + list[i].kongfu + '</td></tr>'
rows.push(str);
}
var div1 = document.getElementById("div1");
div1.innerHTML = '<table><thead><tr><th>#</th><th>姓名</th><th>性别</th><th>年龄</th><th>武功</th></tr></thead><tbody>'
+ rows.join("") + '</tbody></table>';
}
}
};
</script>
</body>
</html>
注：该页面使用了原生的Ajax，并且没有添加任何css样式。
在浏览器中打开页面，点击“获取”按钮，获取数据：
按 F12 键，切换到 Console 页签，选中 XHR ，可以看到对应的Ajax请求。
JQuery
使用JQuery，可以简化代码逻辑。
创建 0710_2.html 文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="btn1">获取</button>
<div id="div1"></div>
<script>
$(function () {
$('#btn1').on('click', function () {
$.get('http://localhost:8080/personsCrossOrigin', function (res) {
var rows = [];
$.each(res.list, function (i, item) {
var str = '<tr><th scope="row">' + (i + 1) + '</th><td>' + item.name + '</td><td>' + item.sex
+ '</td><td>' + item.age + '</td><td>' + item.kongfu + '</td></tr>';
rows.push(str);
});
$('#div1').empty().append('<table><thead><tr><th>#</th><th>姓名</th><th>性别</th><th>年龄</th><th>武功</th></tr></thead><tbody>'
+ rows.join('') + '</tbody></table>');
});
});
});
</script>
</body>
</html>
注：需要先下载 jquery-3.6.0.min.js 文件（ https://jquery.com/download/ ），并置于 lib 目录下。
在浏览器中打开页面，点击“获取”按钮，获取数据：
同样，可以看出这是一个Ajax请求，只不过Initiator是 JQuery。
Bootstrap
目前页面没有使用CSS，接下来我们来美化按钮和表格的外观。如果使用原生CSS，当然没有问题，但是也可以使用别人封装好的样式，简化操作，不用重复制造轮子。本例使用了Bootstrap提供的table样式。
创建 0710_3.html 文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="lib/bootstrap.css" />
<script src="lib/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="btn1" class="btn btn-success">获取</button>
<div id="div1" style="padding: 15px;"></div>
<script>
$(function () {
$('#btn1').on('click', function () {
$.ajax({
method: 'GET',
url: 'http://localhost:8080/personsCrossOrigin',
success: function (res) {
var rows = [];
$.each(res.list, function (i, item) {
var str = '<tr><th scope="row">' + (i + 1) + '</th><td>' + item.name + '</td><td>' + item.sex + '</td><td>'
+ item.age + '</td><td>' + item.kongfu + '</td></tr>';
rows.push(str);
});
$('#div1').empty().append('<table class="table table-success table-striped table-hover"><thead><tr><th scope="col">#</th>'
+ '<th scope="col">姓名</th><th scope="col">性别</th><th scope="col">年龄</th><th scope="col">武功</th></tr></thead><tbody>'
+ rows.join('') + '</tbody></table>');
}
});
});
});
</script>
</body>
</html>
注：需要先下载 bootstrap.css 文件（ https://getbootstrap.com/docs/5.2/getting-started/download/ ），并置于 lib 目录下。
注：本例中，table样式参照了 https://getbootstrap.com/docs/5.2/content/tables/ 所提供的table样式。
在浏览器中打开页面，点击“获取”按钮，获取数据：
可见，有了CSS修饰，页面美观多了。
模板引擎
页面上原本只有一个“获取”按钮，当点击按钮时，会动态创建表格，展示数据。前面都是使用了拼接字符串的方式来生成表格，非常不直观，容易出错，而且难以维护。接下来我们使用模板引擎来分离模板（展示）和数据获取（代码逻辑）。
本例中，表格就是一个模板，它是固定的，而表格里面的数据是变化的，所谓“铁打的营盘流水的兵”。我们把不变的部分抽离出来，形成模板固定下来，随后获取数据时，把数据填充进去即可。
模板引擎有很多实现，比如JSP、Freemarker、Velocity、Thymeleaf等，本例中我们使用 art-template 。
创建 0710_4.html 文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="lib/bootstrap.css" />
<script src="lib/jquery-3.6.0.min.js"></script>
<script src="lib/template-web.js"></script>
</head>
<body>
<button type="button" id="btn1" class="btn btn-success">获取</button>
<div id="div1" style="padding: 15px;"></div>
<script type="text/html" id="tpl-person">
<table class="table table-success table-striped table-hover table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">姓名</th>
<th scope="col">性别</th>
<th scope="col">年龄</th>
<th scope="col">武功</th>
</tr>
</thead>
<tbody>
{{each list}}
<tr>
<th scope="row">{{$index+1}}</th>
<td>{{$value.name}}</td>
<td>{{$value.sex}}</td>
<td>{{$value.age}}</td>
<td>{{$value.kongfu}}</td>
</tr>
{{/each}}
</tbody>
</table>
</script>
<script>
$(function () {
$('#btn1').on('click', function () {
$.ajax({
method: 'GET',
url: 'http://localhost:8080/personsCrossOrigin',
success: function (res) {
var rows = []
var htmlStr = template('tpl-person', res);
$('#div1').html(htmlStr);
}
});
});
});
</script>
</body>
</html>
注：需要先下载 template-web.js 文件（ https://aui.github.io/art-template/docs/installation.html ），并置于 lib 目录下。
可见，使用模板引擎，模板和数据获取分离：模板结构清晰，代码简单明了。
在浏览器中打开页面，点击“获取”按钮，获取数据：
总结
- 原生Ajax：麻烦，需考虑浏览器兼容性；
- JQuery：封装代码逻辑的实现细节和兼容性，简单易用；
- Bootstrap：提供CSS样式，无需重复发明轮子，简单易用，风格一致；
- 模板引擎：模板和数据获取分离：模板结构清晰，代码简单明了；
