客户管理系统开发定制通过Ajax获取数据并显示在表格中（原生Ajax，JQuery，Bootstrap，模板引擎）

需求

客户管理系统开发定制页面上有一个“获取”按钮。客户管理系统开发定制当点击按钮时，客户管理系统开发定制从后端获取数据，客户管理系统开发定制并通过表格显示在页面上。

环境

  • 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

准备

test0709 ，添加Spring Web依赖。

创建Controller MyController ：

@RestControllerpublic 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;    }}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

注：这里加上了 @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"}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42

原生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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48

注：该页面使用了原生的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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38

注：需要先下载 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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42

注：需要先下载 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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65

注：需要先下载 template-web.js 文件（ https://aui.github.io/art-template/docs/installation.html ），并置于 lib 目录下。

可见，使用模板引擎，模板和数据获取分离：模板结构清晰，代码简单明了。

在浏览器中打开页面，点击“获取”按钮，获取数据：

总结

  • 原生Ajax：麻烦，需考虑浏览器兼容性；
  • JQuery：封装代码逻辑的实现细节和兼容性，简单易用；
  • Bootstrap：提供CSS样式，无需重复发明轮子，简单易用，风格一致；
  • 模板引擎：模板和数据获取分离：模板结构清晰，代码简单明了；
网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发