ajax与Springboot通信将数据库数据渲染到前端表格

╰半橙微兮° 2023-10-18 20:58 27阅读 0赞

## 前言 ##

`jQuery`对原生`js`进行了大量封装，让我们使用起来更加方便，尤其`ajax`。这里就对`jQuery`的`ajax`做一个总结。

## 项目创建 ##

演示项目将在之前的`Springboot`项目的基础上进行，这里不对后端实现展开描述，详情请见[https://blog.csdn.net/mu\_wind/article/details/94294138][https_blog.csdn.net_mu_wind_article_details_94294138]

项目结构如下图，使用static作为前端专用文件夹：  
![在这里插入图片描述][20190705111152661.png]

1.  jQuery依赖，本文是下载的jquery-2.1.1.min.js文件放入static/lib中。
2.  index.html是项目的默认访问页面。例如，我将项目启动后，浏览器中输入localhost:8088，将自动进入index.html页。

## 实现过程 ##

演示场景：点击按钮，将后端数据库查询到数据渲染在前端表格中，前端效果是这样的：  
![在这里插入图片描述][20190705113821240.png]  
很丑有没有？与之相比，layui的表格真是美观太多了（欲知如何实现，请看[layui+springboot实现表格增删改查][layui_springboot]）：  
![在这里插入图片描述][20200611101101223.png]

**前端代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>商品列表</title>
    </head>
    <body>
    <div>
        <button id="queryGoods">查询商品</button>
        <table border="1px" id="goods_table">
        </table>
    </div>
    
    <script src="lib/jquery-2.1.1.min.js"></script>
    <script>
    	// 绑定按钮点击事件
        $("#queryGoods").click(function () {
        
            $.ajax({
        
                type: 'get',
                // 如果使用这种url写法，则不需要再写在data中
                // url: '/test/getGoodsInfoByStatus?status=' + 1,
                url: '/test/getGoodsInfoByStatus',
                data: {
        "status": 1},
                contentType: "application/json; charset=utf-8",
                success: function (result) {
        
                    if (result.code == 0) {
        
                        showData(result.data);
                    } else {
        
                        alert("未能获取商品信息！");
                    }
                }, error: function (e) {
        //响应不成功时返回的函数
                    console.log(e, 'error');
                }
            });
        });
    
    	// 将数据渲染在表格中的方法
        function showData(data) {
        
            var table = $("#goods_table");
            table.empty();
            //拼接表头
            table.append("<tr></tr><td>id</td><td>名称</td><td>价格</td><td>数量</td></tr>");
            for (var i = 0; i < data.length; i++) {
        
                //拼接表格的行和列
                var str = "<tr><td>" + data[i].id + "</td><td>" + data[i].name + "</td><td>" + data[i].price + "</td><td>" + data[i].size + "</td></tr>";
                //追加到table中
                table.append(str);
            }
        }
    </script>
    </body>
    </html>

上文通过get方法实现了将数据库数据渲染在前端表格中，下面再演示一下post方法（当然，这种查询类接口一般不定义成post）。整体项目并不需要做过多改动，主要是修改一下前端ajax请求和后端controller。

$("#queryGoods").click(function () {
        
        $.ajax({
        
            type: 'post',
            url: '/test/getGoodsInfoByStatus',
            // JSON.stringify() 方法将 JavaScript 对象转换为字符串。status必须被双引号括起
            data: JSON.stringify({
        "status": 1}),
            contentType: "application/json; charset=utf-8",
            success: function (result) {
        
                if (result.code == 0) {
        
                    showData(result.data);
                } else {
        
                    alert("未能获取商品信息！");
                }
            }, error: function (e) {
        //响应不成功时返回的函数
                console.log(e, 'error');
            }
        });
    });

后端这里不展开，只附上返回的数据：

{
        {
        
    	"msg": "操作成功！",
    	"code": "0",
    	"data": [
    		{
        
    			"id": 1,
    			"name": "iPhone",
    			"type": "国产",
    			"price": 6000.0,
    			"size": 55,
    			"status": 0,
    			"description": "说明"
    		},
    		{
        
    			"id": 2,
    			"name": "watch",
    			"type": "1",
    			"price": 500.0,
    			"size": 35,
    			"status": 1,
    			"description": "说明"
    		},
    		{
        
    			"id": 3,
    			"name": "television",
    			"type": "1",
    			"price": 1000.0,
    			"size": 90,
    			"status": 1,
    			"description": "说明"
    		},
    		{
        
    			"id": 4,
    			"name": "computer",
    			"type": "1",
    			"price": 4500.0,
    			"size": 60,
    			"status": 1,
    			"description": "说明"
    		}
    	]
    }}

## ajax()参数简介 ##

这个方法只包含了1个参数,这个参数里面包含了$.ajax()所需要的请求设置以及回调函数，参数以key/value形式存在。

**参数说明：**

1.  **`url`**(String)：发送请求地址。
2.  **`type`**(String)：请求方式(POST或GET)，默认为GET。其他HTTP请求方法如PUT、DELETE，仅部分浏览器支持。
3.  **`data`**(Object或String)：发送到服务器的数据。如果不是字符串，将自动转换为字符串格式。GET请求中将附加在url后。对象必须是key/value格式，例如\{id:“xxyh”, password:“123456”\}转换为&id=xxyh&password=123456。如果是数组，将自动为不同值对应同一个名称。例如\{name:\[“xxyh”,“dudu”\]\}转换为&name=xxyh&name=dudu。
4.  **`dataType`**(String)：服务器预期返回的数据类型。如果不指定，jquery将根据HTTP包MINE信息返回responseXML或responseText,并作为回调函数参数传递。可用类型：
    
     *  `xml`：返回XML文档，可用jquery处理
     *  `html`：返回纯文本HTML信息，包含的script标签会插入DOM时执行。  
        script:返回纯文本JavaScript代码。如果没有设置cache参数，不会自动缓存结果。在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。
     *  `json`：返回JSON数据。
     *  `jsonp`：JSONP格式。使用JSONP形式调用函数时，例如myurl?callback=?，jquery将自动替换后一个“?”为正确的函数名，以执行回调函数。
     *  `text`：返回纯文本字符串。
5.  `complete`(Function)：请求完成后回调函数(请求成功或失败后均调用)。
6.  `success`(Function)：请求成功回调函数。
7.  `error`(Function)：请求失败时被调用的函数。

[https_blog.csdn.net_mu_wind_article_details_94294138]: https://blog.csdn.net/mu_wind/article/details/94294138
[20190705111152661.png]: https://img-blog.csdnimg.cn/20190705111152661.png
[20190705113821240.png]: https://img-blog.csdnimg.cn/20190705113821240.png
[layui_springboot]: https://blog.csdn.net/mu_wind/article/details/97519334
[20200611101101223.png]: https://img-blog.csdnimg.cn/20200611101101223.png