首页 前端知识 通过Ajax获取数据并显示在表格中(原生Ajax,JQuery,Bootstrap,模板引擎)

通过Ajax获取数据并显示在表格中(原生Ajax,JQuery,Bootstrap,模板引擎)

2024-06-02 09:06:17 前端知识 前端哥 353 358 我要收藏

需求

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

环境

  • 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样式,无需重复发明轮子,简单易用,风格一致;
  • 模板引擎:模板和数据获取分离:模板结构清晰,代码简单明了;
转载请注明出处或者链接地址:https://www.qianduange.cn//article/10500.html
标签
评论
发布的文章

无涯教程-HTML5 - 表单标签

2024-06-08 00:06:06

HTML5基础2

2024-06-07 23:06:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!