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

什么是JSON

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

json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构。

在JSON中可以使用的数据类型如上图所示，JSON简单来说就是数组与对象相互嵌套形成的一种数据结构。
其中对象是{}括起来的内容，以key-value形式来存储数据，对应java中的Map。
数组是[]括起来的内容，字段值可以是字符串，数字，数组，对象，对应java中的List。
例：

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

这个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"
    }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

看起来比较长，实际上就是一个简单的数组内嵌套对象的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)
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

后台Controller的参数：

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

注意这里一定要加@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;
	}
1
2
3
4
5
6
7
8
9

这个方法我们将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":"本月"
        }
    ]
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207

因为这是一个三级表单的表头，所以看上去很长，但实际上结构非常清晰。这个表头实际页面里是这样的。

整理后我们发现，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;
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

Over~