layui+java前端传json后端接收

项目场景：

layui前端使用复选框选择Table的数据传到java后端进行业务操作

---

问题描述

报错类型错误JSON转换接收失败的类型错误

---

解决方案：

分为前后端两种情况

先说前端的:

前端需要是集合转json下面是代码案例

主界面的table选择之后通过缓存传到子界面也就是需要调用显示的界面

if(obj.event==='updateName'){
console.log("更新")
    // 获取选中的数据
    var checkStatus = table.checkStatus('heatSource'); // 获取表格的选中状态
    var checkedData = checkStatus.data; // 获取选中的数据

    // 立即存储选中的数据
    admin.putTempData('checkedHeatSourceData', checkedData);

    // 打开弹窗
    admin.open({
        type: 1,
        title: '绑定用户',
        id: 'ImportHrz',
        offset: '5%',
        area: ['80%', '90%'],
        url: "/airConditioning/components/console/UpdateName.html",
        cancel: function(index, layero) {
            // 弹窗关闭时的回调，这里不需要再存储数据，因为已经在点击时存储了
            layer.close(index);
            return false;
        },
        end: function() {
            table.reload('heatSource', {}); // 只重载数据
        }
    });
}

子界面代码:

var cols=[[ //表头
   { type: 'numbers' },   //自动序号列
      { field: 'fanCoilManufacturer', align: 'center', title: '风机盘管厂家', minWidth:220},
      { field: 'fanCoilUnitModel', align: 'center', title: '风机盘管型号', minWidth:120},
      { field: 'fanCoilUnitGuide', align: 'center', title: '风机盘管攻略', minWidth:120},
      { field: 'highSpeedFanSpeed', align: 'center', title: '高速风机转速', minWidth:120},
      { field: 'mediumSpeedFanSpeed', align: 'center', title: '中速风机转速', minWidth:120},
      { field: 'lowSpeedFanSpeed', align: 'center', title: '低速风机转速', minWidth:120},
      { field: 'manuOfHeatMeterEqui', align: 'center', title: '热表设备厂家', minWidth:110},
      { field: 'heatMeterEquiModel', align: 'center', title: '热表设备型号', minWidth:100},
]];
这是table需要获取的数据他的来源就是你查询或者通过其他界面使用admin.putTempData();

var checkedHeatSourceData = admin.getTempData('checkedHeatSourceData');

传输过来的,我这里是传输过来的所以是这样写的

// 如果你想使用 checkedHeatSourceData 作为表格数据源，你可以这样做：
   if (checkedHeatSourceData && checkedHeatSourceData.length > 0) {
      table.render({
         elem: '#returnDemo', // 确保这个元素 ID 与你的 HTML 中的表格 ID 匹配
         data: checkedHeatSourceData, // 使用选中的数据作为数据源
         loading: true,
         page: false, // 如果不需要分页，可以设置为 false
         limit: Number.MAX_VALUE, // 如果你想一次显示所有数据，可以设置一个大数
         cols: cols
      });
   } else {
      // 如果没有选中的数据，你可能需要处理这种情况
      console.log('没有选中的数据');
   }

下面是获取数据并向后端传输:

$("#SavePara").click(function () {
   // 假设 villageId 已经在之前的某个地方被赋值
   var villageId = $('#Village').val(); // 获取选中小区的 ID

   // 构建请求的数据对象
   var requestData = {
      // 如果后端需要表格的配置，则包含 cols，否则移除它
      // cols: tableConfig.cols,
      villageId: villageId,
      // 添加表格数据
      data: checkedHeatSourceData
   };
   console.log(JSON.stringify(requestData))
   // 发送 AJAX 请求
   $.ajax({
      url: "xxxxx",
      data: JSON.stringify(requestData), // 将数据转换为 JSON 字符串
      type: 'POST',
      contentType: 'application/json', // 设置请求头以发送 JSON 数据
      success: function(res) {
         console.log(res);
         if(res.code === 20){
            layer.msg("保存成功");
            // 清除暂存数据
            admin.putTempData('hrzDate', null);
            // 关闭对话框
            admin.closeDialog('#ImportHrz');
         } else {
            layer.msg(res.message);
         }
      },
      error: function(xhr, status, error) {
         // 如果有错误，可以在这里处理
         console.error("AJAX Error: ", status, error);
         layer.msg("请求失败：" + error);
      }
   });
});

var requestData = { // 如果后端需要表格的配置，则包含 cols，否则移除它 // cols: tableConfig.cols, villageId: villageId, // 添加表格数据 data: checkedHeatSourceData };
这里是我使用了下拉选获取了一个用户 他需要为选择的数据绑定用户数据所以这个requestData里获取了select里的数据和cols的checkedHeatSourceData数据源里的数据,需要使用
data: JSON.stringify(requestData), // 将数据转换为 JSON 字符串 type: 'POST', contentType: 'application/json', // 设置请求头以发送 JSON 数据
转为json 这是前端的问题

后端问题:
后端必须使用

@RequestBody注解不知道的可以去查一下什么意思
这个注解后面需要跟你定义的实体类集合 且实体类的参数与你前端接受的参数名称数量一致即可

后端其实就是这个问题但是有一种情况就是我这种的
我是一个单独参数加上一个data传到后端的所以后端接受时候实体类需要在定义一个并且实体类内定义单独的参数和接收这个data的集合
比如:

@Data
public class UpdateRequestData {

    private String villageId;


    private List<ImportHeatStationName> importHeatStationList;
}
这样定义看似没问题 但是只能接收那个单独的参数这个集合接收不到显示NULL
解决办法也很简单
使用注解: @JsonProperty("")
这个注解作用是匹配映射这个实体类接收前端时的名称根据名称进行映射从而达到获取数据的效果

@Data
public class UpdateRequestData {
    @JsonProperty("villageId")
    private String villageId;

    @JsonProperty("data")
    private List<ImportHeatStationName> importHeatStationList;
}

以上就是我所遇到的问题和解决办法 仅供参考