Java----layui动态表单中表头与数据----JSON串前端发送与后端接收解析

最新推荐文章于 2024-05-15 11:50:30 发布
最新推荐文章于 2024-05-15 11:50:30 发布
阅读量2.8k 收藏 8
点赞数 1
分类专栏： json layui 文章标签： json java jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a624193873/article/details/105670684
版权

这里写目录标题

什么是JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。
JSON采用完全独立于程序语言的文本格式，但是也使用了类C语言的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。
这些特性使JSON成为理想的数据交换语言。

json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构。
在这里插入图片描述
在JSON中可以使用的数据类型如上图所示，JSON简单来说就是数组与对象相互嵌套形成的一种数据结构。
其中对象是{}括起来的内容，以key-value形式来存储数据，对应java中的Map。
数组是[]括起来的内容，字段值可以是字符串，数字，数组，对象，对应java中的List。
例：

[{"name":"塞尔达","age":"23"},{"name":"林克","age":"18"}]

这个JSON很明显，是一个JSON数组，数组的字段值是对象。这个数组的size为2。

layui动态表单----数据

首先我们来解析layui表单提交的JSON数据。
例：

[
    {
        "addressProvince":"1",
        "overValue":"1",
        "yearOverArea":"1",
        "projectLevel":"1",
        "companyName":"1",
        "createYear":"2020",
        "contractEnd":"2020-04-08",
        "monthOverNumber":"1",
        "yearDoingValue":"1",
        "LAY_TABLE_INDEX":0,
        "type":"",
        "projectStatusName":"停工",
        "layer":"1",
        "addressDetail":"1",
        "endImageProgress":"1",
        "contractName":"1",
        "state":0,
        "subcompanyName":"山西一建集团有限公司",
        "constructionArea":"1",
        "addressCity":"1",
        "formId":"",
        "createMonthName":"1月",
        "branchId":"169254",
        "monthOverArea":"1",
        "yearOverNumber":"1",
        "branchName":"材料科",
        "startDoingValue":"1",
        "createMonth":"1",
        "projectStatus":"1",
        "monthDoingValue":"1",
        "realEnd":"2020-04-10",
        "contractPrice":"1",
        "structureType":"1",
        "createYearName":"2020年",
        "addressDistrict":"1",
        "realStart":"2020-04-09",
        "contractStart":"2020-04-07",
        "contractCode":"1"
    },
    {
        "addressProvince":"1",
        "overValue":"1",
        "yearOverArea":"1",
        "projectLevel":"1",
        "companyName":"1",
        "createYear":"2020",
        "contractEnd":"2020-04-08",
        "monthOverNumber":"1",
        "yearDoingValue":"1",
        "LAY_TABLE_INDEX":1,
        "type":"",
        "projectStatusName":"在施",
        "layer":"1",
        "addressDetail":"1",
        "endImageProgress":"1",
        "contractName":"1",
        "state":0,
        "subcompanyName":"山西一建集团有限公司",
        "constructionArea":"1",
        "addressCity":"1",
        "formId":"",
        "createMonthName":"1月",
        "branchId":"169254",
        "monthOverArea":"1",
        "yearOverNumber":"1",
        "branchName":"材料科",
        "startDoingValue":"1",
        "createMonth":"1",
        "projectStatus":"0",
        "monthDoingValue":"1",
        "realEnd":"2020-04-10",
        "contractPrice":"1",
        "structureType":"1",
        "createYearName":"2020年",
        "addressDistrict":"1",
        "realStart":"2020-04-09",
        "contractStart":"2020-04-07",
        "contractCode":"1"
    }
]

看起来比较长，实际上就是一个简单的数组内嵌套对象的JSON串，如下图所示：
在这里插入图片描述
先贴出前端传回这个JSON串的ajax

$.ajax({
	type: 'post',//必须为post
	url: '/em/ext/api/test/create',
	contentType : 'application/json;charset=utf-8', //设置请求头信息
	dataType:"json",//数据类型为json
	data: JSON.stringify(tableData),//通过函数进行转换，将表单数据转化为JSON对象
	success:function(res){
		if(res.code=="M000000"){
			layer.msg("保存成功");
		  }else{
			  layer.msg(res.info);
		  }
	},
	error:function(err){
		console.log(err)
	}
})

后台Controller的参数：

public Map<String, Object> approval(@RequestBody String jsonStr){
	
}

注意这里一定要加@RequestBody才可接收json数据。

注解@RequestBody接收的参数是来自requestBody中，即请求体。因此前端的ajax方式必须为post，get请求是没有请求体的，因此该注解不适用。

这里因为是动态表单，所以是用的字符串来接收。若是非动态表单，可以使用实体类来接收数据。如果传来的数据是对象类型，可以使用@RequestBody User user 来直接接收。如果传来的对象是数组，数组内的元素是对象，则可使用@RequestBody List<User> user 来接收。
这里我们解析动态表单，所以实体类内的元素是不确定的，因此用String来接收，之后再进行处理。

具体解析代码如下：

public static List<String> parseJsonArray(String jsonStr){
		JSONArray jArray = JSON.parseArray(jsonStr);
		List<String> res = new ArrayList<>();
		for(int i=0;i<jArray.size();i++){
			JSONObject jsonObject = jArray.getJSONObject(i);
			res.add(jsonObject.toString());
		}
		return res;
	}

这个方法我们将json串中的多个对象拆分，存入List<String>中。
首先第一步，我们通过JSON.parseArray(jsonStr);这个函数，将json字符串转化为JSONArray对象。
在这里插入图片描述
查看源码我们可以看到，JSONArray类实现了List<Object>接口，因此他实现了List接口的方法。我们可以通过for循环进行遍历，拿到他的具体某一个元素，这里的元素是对象类型的json，因此我们调用它的getJSONObject(i);方法，获取它的JSON对象，最后再转化为字符串存入List中。后续如果需要操作，再通过JSON.parseObject(jsonStr);方法将String类型的json解析成对象即可。
这里我们再看一下JSONObject这个JSON对象。
在这里插入图片描述
可以看到它实现了Map<String,Object>接口，因此Map接口定义的方法，在JSONObject中均有实现。
由此我们可以印证之前所说，JSON中的数组就是Java中的LIst，JSON中的对象就是Java中的map。

layui动态表单----表头

首先我们贴出layui动态表单渲染所需要的json串。

[
    [
        {
            "field":"id",
            "title":"建筑业企业建筑施工板块完成情况月报",
            "colspan":35
        }
    ],
    [
        {
            "field":"subcompanyName",
            "title":"子集团名称",
            "rowspan":2
        },
        {
            "field":"branchName",
            "title":"分公司名称",
            "templet":"#branch",
            "rowspan":2
        },
        {
            "field":"companyName",
            "edit":"text",
            "title":"建设单位及单位工程名称",
            "rowspan":2
        },
        {
            "field":"createYear",
            "templet":"#year",
            "title":"创建年份",
            "rowspan":2
        },
        {
            "field":"createMonth",
            "templet":"#month",
            "title":"创建月份",
            "rowspan":2
        },
        {
            "field":"contractName",
            "edit":"text",
            "title":"合同工程名称",
            "rowspan":2
        },
        {
            "field":"contractCode",
            "edit":"text",
            "title":"合同编号",
            "rowspan":2
        },
        {
            "field":"contractPrice",
            "edit":"text",
            "title":"合同价（万元）",
            "rowspan":2
        },
        {
            "title":"建设地址",
            "colspan":4
        },
        {
            "title":"合同工期",
            "colspan":2
        },
        {
            "title":"实际工期",
            "colspan":2
        },
        {
            "field":"structureType",
            "edit":"text",
            "title":"结构类型",
            "rowspan":2
        },
        {
            "field":"layer",
            "edit":"text",
            "title":"层数",
            "rowspan":2
        },
        {
            "field":"constructionArea",
            "edit":"text",
            "title":"施工面积(m²)",
            "rowspan":2
        },
        {
            "field":"projectLevel",
            "edit":"text",
            "title":"项目级别",
            "rowspan":2
        },
        {
            "field":"projectStatus",
            "templet":"#projectStatus",
            "title":"项目状态",
            "rowspan":2
        },
        {
            "title":"竣工面积及竣工产值",
            "colspan":5
        },
        {
            "title":"施工产值（万元）",
            "colspan":3
        },
        {
            "field":"endImageProgress",
            "edit":"text",
            "title":"期末形象进度",
            "rowspan":2,
            "width":100
        },
        {
            "title":"操作",
            "width":200,
            "toolbar":"#toolbar",
            "rowspan":2
        }
    ],
    [
        {
            "field":"addressProvince",
            "edit":"text",
            "title":"省"
        },
        {
            "field":"addressCity",
            "edit":"text",
            "title":"市"
        },
        {
            "field":"addressDistrict",
            "edit":"text",
            "title":"区/县"
        },
        {
            "field":"addressDetail",
            "edit":"text",
            "title":"详细地址"
        },
        {
            "field":"contractStart",
            "templet":"#contractStart",
            "title":"开工日期",
            "rowspan":2
        },
        {
            "field":"contractEnd",
            "templet":"#contractEnd",
            "title":"竣工日期",
            "rowspan":2
        },
        {
            "field":"realStart",
            "templet":"#realStart",
            "title":"开工日期",
            "rowspan":2
        },
        {
            "field":"realEnd",
            "templet":"#realEnd",
            "title":"竣工日期",
            "rowspan":2
        },
        {
            "field":"yearOverArea",
            "edit":"text",
            "title":"自年初累计_竣工面积（m2）"
        },
        {
            "field":"yearOverNumber",
            "edit":"text",
            "title":"个数"
        },
        {
            "field":"monthOverArea",
            "edit":"text",
            "title":"本月_竣工面积（m2）"
        },
        {
            "field":"monthOverNumber",
            "edit":"text",
            "title":"个数"
        },
        {
            "field":"overValue",
            "edit":"text",
            "title":"竣工产值（万元）"
        },
        {
            "field":"startDoingValue",
            "edit":"text",
            "title":"自开工累计"
        },
        {
            "field":"yearDoingValue",
            "edit":"text",
            "title":"自年初累计完成"
        },
        {
            "field":"monthDoingValue",
            "edit":"text",
            "title":"本月"
        }
    ]
]

因为这是一个三级表单的表头，所以看上去很长，但实际上结构非常清晰。这个表头实际页面里是这样的。
在这里插入图片描述
整理后我们发现，JSON结构如下图所示：
在这里插入图片描述
最外层是一个List，因为表头是三级，所以List内有3个元素，均为List，我们继续看内层List内部的结构：
在这里插入图片描述
如图所示，内部是一个对象。也就是说，表头的JSON结构要稍微复杂一些，嵌套关系是 外数组–内数组–对象。
这里我们要做的是，找出表头内所有含有field属性的对象。因为表单是动态的，所以我们拿到这些field也就相当于拿到了Map的Key，可以去表单数据的JSON串中获取相应的数据。
代码如下：

	public static List<String> parseJsonHead(String jsonHead){
		JSONArray jArray = JSON.parseArray(jsonHead);//将字符串转化为JSONArray对象，这里是外层数组
		List<Map<String, Object>> list = new ArrayList<>();
		List<String> res = new ArrayList<>();
		for(int i=0;i<jArray.size();i++){//循环，对外层数组进一步拆分
			JSONArray jArr = jArray.getJSONArray(i);//得到内层数组对象
			for(int j=0;j<jArr.size();j++){
				JSONObject jsonObject = jArr.getJSONObject(j);//得到具体的每个对象，存入list
				list.add(jsonObject);
			}
		}
		list.forEach(v -> {//这里我们遍历得到的list，若field不为空，则存入结果数组，最终我们得到存有字段名的数组List<String>
			String field = (String)v.get("field");
			if(field!=null){
				res.add(field);
			}
		});
		return res;
	}

具体步骤见注释。值得注意的是，由外层数组获取内层数组的部分jArray.getJSONArray(i); 我们可以看到JSONArray类型也是可以调用getJSONArray这个api的，这正好与我们的理解相符，数组内部既可以是数组，也可以是对象。

Over~

KDoo
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui框架，前台table接收和layui规定不同的json数据并解析展示
IShallTasteGraceLife的博客
01-08 1930
layui框架，前台table接收和layui规定不同的json数据并解析展示1，table组件默认规定的数据格式2，完整的写法3，附上源码，方便老铁们复制粘贴用 1，table组件默认规定的数据格式 2，完整的写法 parseData和response两个参数一定要同时使用，不然不起效果。其实如果完全按照layui规定的格式来接收json数据完全可以避免这种问题，但是因为是接口嘛，毕竟别人不...
layui前端提交的json数据，php后端循环读取数据内容
院主的博客
06-16 3102
layui前端提交的json数据，php后端循环读取数据内容 layui的数据表格在前端发送多选数据的时候，发送的是json数据，对于一些对Json数据不太了解的小伙伴们来说，解析可能会遇到点难度，接下来给你们提供一个简单实用的方法 一般layui的数据表格多选发送的json数据为 [{"id":"10001","username":"杜甫","email":"xianxin@layui.com"...
layui+java前端传json后端接收
最新发布
路飞船长的博客
05-15 783
layui前端使用复选框选择Table的数据传到java后端进行业务操作。
Layui 数据表格json格式问题
cutlery1137的博客
04-20 2134
Layui 数据表格的json格式，后端传到前端的json格式
Layui数据表格请求添加参数
热门推荐
shuai的博客
12-24 1万+
Layui数据表格请求添加参数，重载时添加参数
关于Layui以JSON方式提交数据到Springboot后台的一个小错误
xiaojie_liu的博客
09-13 270
前端使用Layui以ajax的方式提交json数据到后台，后台使用Springboot3，controller中以注解的方式约定了提交方式为post，默认数据为：application/json。原因是：在html中撰写的代码，data:……
java 动态表单 开源_deform: 动态表单，基于雷劈网的表单设计器扩展，java实现后台解析（插件内容和字段和原版有一定改变）。致敬雷劈网.http://formdesign.leipi.or...
weixin_36178269的博客
02-13 589
注意注意 VUE版本得动态表单已开始发布(计划9月初推到npm仓库)，此jquery版本的项目早已不再维护，请大家移步：预览github： github预览gitee镜像: gitee基于雷劈网的表单设计器扩展，java实现后台解析(插件内容和字段和原版有一定改变)。致敬雷劈网. http://formdesign.leipi.org/解析全部由java处理，时间紧迫，代码实现上不考虑太多的效率...
react-json-editor：用于使用JSON-Schema进行响应的动态表单组件
02-03
react-json-editor使用一个JavaScript对象来描述我们希望用户提供的数据的形状-模式-并根据该模式自动创建表单。 它还使用相同的模式验证用户输入。 欢迎捐款 我很高兴接受PR。 如果您想提供帮助但不知道如何操作，...
json-lib包（Java解析JSON的所有依赖包）
09-25
总结来说，`json-lib`是Java开发者处理JSON数据的一个强大工具，提供了一整套解决方案，从JSON字符串的解析到Java对象的转换，以及与其他数据格式的交互。这个资源包包含所有必要的依赖，使得开发者能快速集成和使用...
struts2-json-plugin-2.1.8.zip_Java 8_json-plugin-2.1.8
09-24
3. **JSON 输入支持**：通过配置，Struts2 JSON插件还允许从JSON数据中提取值并填充到Action的字段中，支持表单提交的数据回填。 4. **性能优化**：Struts2 JSON Plugin 2.1.8 版本可能包含性能优化，减少JSON序列...
vuetify-jsonschema-form：创建美观而省力的表单，以输出有效数据
02-06
vjsf vuetify-jsonschema-form 创建美观而省力的表单，以输出有效数据。 基于 / / 。 请参阅。开发服务器该文档也可用作开发服务器。 npm installnpm run doc-dev错误报告Bug报告是使用github问题创建的。 文档中的...
Layui调用json获取表格动态数据代码.zip
07-30
Layui调用json获取表格动态数据代码，treetable是一款功能强大的树形表格插件，支持全部展开，全部折叠，刷新表格，修改，删除等功能。
sentsin-layui-master.zip_Layui框架_UI-后台_layui_sortclf
09-23
Layui是一款优秀的开源前端框架，它以简洁、实用、高效的设计理念著称，被广泛应用于各类Web项目，包括后台管理界面、电商网站、OA系统等。"sentsin-layui-master.zip"是一个包含Layui框架的压缩包，主要用于创建...
vue使用echarts简单教程（错误：Error in mounted hook: “TypeError: Cannot read property ‘getAtrribute’ of undef）
lanseguhui的博客
05-21 3964
1.安装依赖 npm install echarts -S 2.在main.js中引入 import echarts from 'echarts' Vue.prototype.$echarts = echarts 3.在组件中使用 html标签,一定要设置宽高 <div ref="activity" style="width:100%;height:285px"></div> 定义一个初始化的方法中写 echartsInit(){ let act
[Layui]表单传值到后端的两种方式
德仔
03-10 4913
表单传值到后端的两种方式表单传值方法一：后端参数接收HttpContext.Request.Form["xxx"];方法二 表单同名对象传值(表单name与类名一致) 表单传值 除通过url参数方式或者通过自定义对象方式传值外。 还有通过后端参数接收和同名对象传值两种方法 方法一：后端参数接收HttpContext.Request.Form[“xxx”]; //监听提交 form.on('submit(saveBtn)', function (data) {
ajax获取json layui_记一次layui 通过ajax异步获取数据修改页面表单
weixin_35779506的博客
01-26 1017
本次记录的是开发枫叶scrm时遇到的，问题是发现不同功能会有很多相同的调用，导致比较多的重复代码。于是开始看CI4的文档，着手尝试不同的编写方法。在后端新建一个控制器，单独作为api输出json数据；useCodeIgniter\API\ResponseTrait;//文档上是写到方法上面的，好像是不能用的useApp\Controllers\User\Spreaders;classCl...
jquery post json数据_LayUi的from组件搭配jQuery提交
weixin_39589923的博客
11-22 440
凯哥最近正在学习layui这个后台框架。先看layui简介：layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验。本文将介绍layui form组件+jquery提交。一：页面引入jquery相关：1.1：引入CSS​1.2：引入js​注意，js在下面位置放的。from内容：​这里需要记住，from的id为：fo...
layui 各种方式异步请求
dreamMRs的博客
09-10 7157
//穿梭框 $.post(url,参数,function(res){},"json") 请求过来的数据需要 paseData进行解析 //树状图 $.post() //数据表格 url:----, where:{ token }, method:"post" //封装函数 active={ load:function(){ //渲染 } } active.load(); ...
前端学习_Javascript_Layui、JQuery_树形选择组件、post请求
YelloooBlue's Blog
02-10 486
主要知识点： 代码 HTML CSS Javascript 插件 layui.js 效果： 学习记录： 创建一个树形组件 最近在设计一个系统，需要根据组织关系查看、并选中一些部门。用传统的复选框显得有些臃肿，于是想到之前在OA中看到的树形组织关系。 树形结构很像我们平常所使用的JSON结构，于是就在网上找有没有JSON转为树形图的组件，没想到还真给我找到了 Layui-tree的树形组件可以满足这个要求。 数据结构： 通过这个组件也了解了一下Layui这个前端框架，设计理念是非常不错的，都是模块化
layui代码生成器
10-16
Layui代码生成器是一款基于Layui前端框架的代码生成工具。Layui是一套使用简单、易于上手的前端UI框架，具有丰富的组件和强大的扩展能力。而Layui代码生成器则是为了更加方便快捷地生成符合Layui风格的代码而设计的工具。 使用Layui代码生成器，我们可以通过简单的配置和操作，快速生成常见的前端代码。它提供了多种代码生成选项，包括生成表单、表格、树等各种常见的页面元素。我们只需选择相应的生成选项，填写相关的字段和配置信息，点击生成按钮，即可生成对应的代码。 生成的代码包含了HTML、CSS和JavaScript部分，结构清晰，样式简洁。它遵循了Layui的设计规范和命名规范，充分发挥了Layui框架的特点和优势。生成的代码可以直接使用，也可根据需求进行进一步的扩展和修改。 通过Layui代码生成器，我们可以大大提高开发效率，减少手写代码的时间和工作量。它适用于各种项目类型，无论是小型网站还是大型应用，都可以得到很好的应用和推广。 总之，Layui代码生成器是一款便捷实用的前端工具，可以快速生成符合Layui风格的前端代码，提高开发效率，减少重复劳动。它是Layui框架的辅助工具，为开发者提供了更多便利和选择，是前端开发过程中的一股清风。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值