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

前言

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

项目创建

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

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

  1. jQuery依赖,本文是下载的jquery-2.1.1.min.js文件放入static/lib中。
  2. 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形式存在。

参数说明:

  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):请求失败时被调用的函数。
  • 9
    点赞
  • 80
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 要将后端数据渲染为不同颜色并在前端显示,可以使用以下步骤: 1. 在后端程序中,对数据进行处理并为每一个数据项分配一个特定的颜色。 2. 将处理后的数据以 JSON 或 XML 等格式返回给前端。 3. 在前端程序中,使用 JavaScript 或其他前端技术获取数据并显示。 4. 使用 CSS 或 JavaScript 将每个数据项的颜色应用到前端显示的元素上。 这些步骤可以帮助您在前端展示不同颜色的后端数据。 ### 回答2: 将后端数据渲染上不同颜色后显示到前端可以通过以下步骤实现。 首先,在后端编程语言中,根据数据的不同属性或条件,为每个数据点赋予相应的颜色。这可以通过使用条件和比较语句来实现。例如,如果数据是数字类型,可以根据数值的大小来决定颜色;如果数据是字符串类型,可以根据不同的字符串内容来决定颜色。 接下来,在后端生成带有颜色信息的数据结果。这可以采用不同的方式,如在数据中添加一个示颜色的字段,或者使用JSON等数据格式来保存带有颜色信息的数据。 然后,在前端的页面中,使用前端编程语言(如JavaScript)获取后端生成的包含颜色信息的数据结果。可以通过Ajax请求从后端获取数据,或者将数据渲染在模板中,然后通过JavaScript获取。 最后,在前端页面中,根据后端传递的颜色信息,通过样式(CSS)或者JavaScript动态改变元素的背景色或者文字颜色等属性,从而实现将后端数据渲染上不同颜色后显示到前端。 总之,通过在后端数据赋予相应的颜色,并在前端页面中根据颜色信息改变元素的样式,可以实现将后端数据渲染上不同颜色后显示到前端。这样可以使数据更加直观和易于理解,提供更好的用户体验。 ### 回答3: 将后端数据渲染上不同颜色后显示到前端可以通过以下步骤实现。 首先,需要在后端编写代码来为数据添加不同的颜色信息。可以根据特定的逻辑或者条件来确定每个数据对应的颜色。通过在数据中添加颜色属性,例如CSS样式或HTML标签等,来示不同的颜色。 然后,在前端页面中,需要编写相应的代码来接收并展示后端渲染好的数据。可以使用JavaScript等前端编程语言来获取后端数据,并将其动态地插入到HTML页面中的特定位置。 接着,通过CSS样式或JavaScript来解析后端数据中的颜色属性,并将其应用到对应的HTML元素上,从而实现数据渲染效果。可以通过修改元素的背景色、文本颜色、边框颜色等来展示不同的颜色效果。 最后,将经过渲染数据展示在前端页面上,供用户查看和操作。这样,用户就能够看到不同颜色的数据,并根据颜色来做出相应的判断和决策。 总结来说,将后端数据渲染上不同颜色后显示到前端,需要后端编写代码为数据添加颜色属性,前端获取后端数据并将其渲染到HTML页面中,并通过CSS样式或JavaScript解析和应用颜色属性,最终展示经过渲染数据给用户。这样,用户可以根据不同颜色的数据来进行相应的操作和判断。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

云深i不知处

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值