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

云深i不知处

已于 2022-04-24 17:20:36 修改

阅读量1.6w

点赞数 9

分类专栏： # layui 文章标签： jQuery ajax 前端表格前后端通信 ajax table

于 2019-07-05 11:40:36 首次发布

本文链接：https://blog.csdn.net/mu_wind/article/details/94638531

版权

layui 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

前言

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

项目创建

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

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

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

实现过程

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

前端代码：

<!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形式存在。

参数说明：

url(String)：发送请求地址。
type(String)：请求方式(POST或GET)，默认为GET。其他HTTP请求方法如PUT、DELETE，仅部分浏览器支持。
data(Object或String)：发送到服务器的数据。如果不是字符串，将自动转换为字符串格式。GET请求中将附加在url后。对象必须是key/value格式，例如{id:“xxyh”, password:“123456”}转换为&id=xxyh&password=123456。如果是数组，将自动为不同值对应同一个名称。例如{name:[“xxyh”,“dudu”]}转换为&name=xxyh&name=dudu。
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：返回纯文本字符串。
complete(Function)：请求完成后回调函数(请求成功或失败后均调用)。
success(Function)：请求成功回调函数。
error(Function)：请求失败时被调用的函数。