需求

页面上有一个“获取”按钮。当点击按钮时，从后端获取数据，并通过表格显示在页面上。

环境

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样式，无需重复发明轮子，简单易用，风格一致；
模板引擎：模板和数据获取分离：模板结构清晰，代码简单明了；

通过Ajax获取数据并显示在表格中（原生Ajax，JQuery，Bootstrap，模板引擎）相关推荐

ajax异步获取数据后动态向表格中添加数据的页面
因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有看到现成的,决定自己写个例子 1.HTML页面 [html] view plaincopyp ...
ajax异步获取数据后动态向表格中添加数据(行)
因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有看到现成的,决定自己写个例子 1.HTML页面 [html] view plaincopyp ...
通过ajax获取的数据怎怎么在html上,Ajax获取数据然后显示在页面的实现方法
主要功能流程介绍循环获取列表数据点击列表数据进入详情页点击报名参加弹出报名成功提示框点击提示框中的确定按钮,跳回列表页代码实现流程和解说 1.访问链接list.PHP时判断是pc端还是客户端 ...
111 ajax获取数据jsrender显示数据
文章目录 1.通过dom操作实现数据的显示 2.使用jsrender显示数据使用 axios实现 ajax获取天气数据并显示数据界面如下: 引入bootstrap样式 <link rel=& ...
AJAX获取数据然后显示在页面
主要功能流程介绍循环获取列表数据点击列表数据进入详情页点击报名参加弹出报名成功提示框点击提示框中的确定按钮,跳回列表页代码实现流程和解说一.列表页 1.访问链接list.php时判断是pc ...
vue接收json数据_Vue之使用ajax获取json数据，并用v-for循环显示在表格中
运行的时候,出现了php跨域问题,解决办法是在php的头文件中添加了如下代码: header('Content-Type: application/json'); header('Content-Ty ...
js ajax获得对象怎么放到td上,jquery通过AJAX从后台获取信息并显示在表格上，并支持行选中...
不想用Easyui的样式,但是想要他的表格功能,本来一开始是要到网上找相关插件的,但是没找到就开始自己写,没想到这么简单. 后台代码:(这个不重要) public ActionResult GetDi ...
ajax获取数据添加到表格,Jquery通过AJAX从后台获取数据显示在表格上（复选）
代码: function GetMultiLineSelectTable(tableId, selectIds) { var table = $(tableId); var url = table.d ...
Datatables学习（二）ajax获取数据
上一篇文章,讲解了datatables的基本创建,这一讲讲解datatables通过ajax异步获取数据 1.前提准备以一个图书管理的表格为例,后台java代码就不细说了,这里主要讲解前端数据库表 ...

通过Ajax获取数据并显示在表格中（原生Ajax，JQuery，Bootstrap，模板引擎）

需求

环境

准备

原生Ajax

JQuery

Bootstrap

模板引擎

总结

通过Ajax获取数据并显示在表格中（原生Ajax，JQuery，Bootstrap，模板引擎）相关推荐

最新文章

热门文章