【前端系列-1】ajax与Springboot通信将数据库数据渲染到前端表格
时间:2022-07-25
本文章向大家介绍【前端系列-1】ajax与Springboot通信将数据库数据渲染到前端表格,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言
jQuery
对原生js
进行了大量封装,让我们使用起来更加方便,尤其ajax
。这里就对jQuery
的ajax
做一个总结。
项目创建
演示项目将在之前的Springboot
项目的基础上进行,这里不对后端实现展开描述
项目结构如下图,使用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):请求失败时被调用的函数。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 剑指offer(13-15)题解
- 【leetCode】青蛙跳台问题(这只青蛙会托马斯大旋转)day07
- 【leetCode】斐波那契数列day06
- 剑指offer(61-67)题解
- 宇智波程序笔记8-【高并发】ThreadLocal学会了这些,你也能和面试官扯皮了!
- 情感分析数据预处理过程
- java的内部类和静态内部类(嵌套类)
- python爬取B站视频弹幕分析并制作词云
- mybatis扩展之自定义类型处理器处理枚举类型
- IMDB影评数据集预处理(使用word2vec)
- 【leetCode】使用两个栈搞一个队列day05
- bert训练代码
- mybatis文件映射之自定义返回结果集
- maven之第一个maven程序
- 【LeetCode】重建二叉树day04