2020-11-11

SpringMVC JSON接收

springmvc接收json数据的4种方式

ajax我经常用到,传的数据是json数据,json数据又有对象,数组。所有总结下springmvc获取前端传来的json数据方式:

1、以RequestParam接收

前端传来的是json数据不多时:[id:id],可以直接用@RequestParam来获取值

@Autowired
private AccomodationService accomodationService;

@RequestMapping(value = "/update")
@ResponseBody
public String updateAttr(@RequestParam ("id") int id) {
    int res=accomodationService.deleteData(id);
    return "success";
}

 

2、以实体类方式接收

前端传来的是一个json对象时:{【id,name】},可以用实体类直接进行自动绑定

@Autowired
private AccomodationService accomodationService;

    @RequestMapping(value = "/add")
    @ResponseBody
    public String addObj(@RequestBody Accomodation accomodation) {
        this.accomodationService.insert(accomodation);
        return "success";
    }

3、以Map接收

前端传来的是一个json对象时:{【id,name】},可以用Map来获取

@Autowired
private AccomodationService accomodationService;

@RequestMapping(value = "/update")
@ResponseBody
public String updateAttr(@RequestBody Map<String, String> map) {
    if(map.containsKey("id"){
        Integer id = Integer.parseInt(map.get("id"));
    }
    if(map.containsKey("name"){
        String objname = map.get("name").toString();
    }
    // 操作 ...
    return "success";
}

4、以List接收

当前端传来这样一个json数组:[{id,name},{id,name},{id,name},...]时,用List<E>接收

@Autowired
private AccomodationService accomodationService;

@RequestMapping(value = "/update")
@ResponseBody
public String updateAttr(@RequestBody List<Accomodation> list) {
    for(Accomodation accomodation:list){
        System.out.println(accomodation.toString());
    }
    return "success";
}

补充4

SpringMVC接收List型参数

 

1、controller

 

复制代码

复制代码

@RequestMapping("/postList")
    @ResponseBody
    public String postList(@RequestBody List<TestL> testL){
        System.out.println(testL);
        return null;
    
    }

复制代码

复制代码

 

需要注意点:参数前面必须有注解 @RequestBody

 

2、ajax请求

 

复制代码

复制代码

var testList=[];
var user={};
user.id=1;
user.name='jack';
testList.push(user);
var user2={};
user2.id=2;
user2.name='tom';
testList.push(user2);
$.ajax({
    // headers必须添加,否则会报415错误
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
  type: 'POST',
  dataType: "json", //表示返回值类型,不必须
  data: JSON.stringify(testList),
  url: '/test/postList',
  success: function(){
      alert('success');
  }
  
});

复制代码

复制代码

 

需要注意点:1、参数是数组类型

 

      2、传入data时,转换 JSON.stringify(testList)

 

      3、必须有headers: {

 
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }

最后再看下TestL类,没有特别之处(不用包装)。
 

复制代码

复制代码

public class TestL {
    private Integer id;
    private String name;
    
    public Integer getId() {
        return id;
    }
    
    public void setId(Integer id) {
        this.id = id;
    }
    
    public String getName() {
        return name;
    }
    
    public void setName(String name) {
        this.name = name;
    }
}

复制代码

复制代码

<think> 我们只需要调整显示样式,使得日期在视觉上呈现出递增的效果(比如颜色渐变、字体大小渐变等),而不是修改日期的值。 根据用户描述,日期值已经存在,且按行递增(第一行是2020-10-11,第二行是2020-11-11,第三行是2020-12-11,以此推)。 因此,我们只需要为每一行的日期单元格设置不同的样式,例如: - 颜色从浅到深(表示时间由远及近) - 字体大小由小变大(表示时间由远及近) 这样,用户一眼就能看出日期的递增趋势。 我们将使用jQuery遍历每一行,然后根据行号(索引)来动态设置样式。 注意:日期已经存在,我们不需要修改值,只需要修改显示样式。 具体实现: 1. 遍历表格的每一行(跳过表头)。 2. 对于每一行,获取它在所有数据行中的序号(从0开始)。 3. 计算该行的样式(颜色、字体大小等),序号越大(即越往下),颜色越深,字体越大。 4. 将计算出的样式应用到该行的日期单元格上。 我们将为两个日期列(第4列和第5列)设置样式,但也可以根据需求调整。 下面是一个完整的实现代码: </think> ### 解决方案:实现日期值的视觉递增效果 根据您的需求(日期值已存在且按时间递增排列,只需增强视觉呈现效果),以下是优化后的实现方案: ```html <style> /* 日期递增视觉增强样式 */ .date-column { transition: all 0.3s ease; } /* 时间越近的日期视觉越突出 */ .recent-date { font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.1); background-color: #f8f9fa; } </style> <script> $(document).ready(function() { // 获取日期列中的所有日期值 const dateValues = []; $("#table_border_id tr:gt(0)").each(function() { dateValues.push($(this).children().eq(3).find('input').val()); }); // 为日期列应用视觉递增效果 $("#table_border_id tr:gt(0)").each(function(i) { const dateCell = $(this).children().eq(3).addClass('date-column'); const dateValue = dateValues[i]; // 计算视觉权重(日期越新权重越高) const date = new Date(dateValue); const maxDate = new Date(Math.max(...dateValues.map(d => new Date(d)))); const minDate = new Date(Math.min(...dateValues.map(d => new Date(d)))); // 计算时间比例(0-1范围) const timeRatio = (date - minDate) / (maxDate - minDate); // 应用视觉增强效果 dateCell.css({ 'font-size': `${14 + timeRatio * 6}px`, // 字体大小递增 'color': `hsl(214, ${70 + timeRatio * 30}%, ${40 - timeRatio * 15}%)`, // 颜色渐变 'border-left': `4px solid hsl(214, ${70 + timeRatio * 30}%, 50%)`, 'padding': '8px 12px', 'background': `linear-gradient(to right, rgba(0,123,255,${0.1 * timeRatio}), white)` }); // 为最近日期添加特殊标识 if (date.getTime() === maxDate.getTime()) { dateCell.addClass('recent-date'); } }); }); </script> ``` ### 实现原理: 1. **日期值采集**: ```javascript const dateValues = []; $("#table_border_id tr:gt(0)").each(function() { dateValues.push($(this).children().eq(3).find('input').val()); }); ``` - 收集所有日期值用于计算时间范围 2. **时间比例计算**: ```javascript const timeRatio = (date - minDate) / (maxDate - minDate); ``` - 计算当前日期在时间范围内的位置比例(0=最早日期,1=最新日期) 3. **动态视觉增强**: - **字体大小**:`14 + timeRatio * 6px`(最新日期比最早大6px) - **颜色渐变**:使用HSL色彩空间实现平滑过渡 - **边框标识**:左侧色条随日期趋新而加深 - **背景渐变**:最新日期有更明显的蓝色高亮 4. **最近日期突出**: ```javascript if (date.getTime() === maxDate.getTime()) { dateCell.addClass('recent-date'); } ``` - 为最新日期添加特殊样式(加粗、阴影等) ### 视觉呈现效果示例: | 日期值 | 视觉特征 | |--------------|-----------------------------| | 2020-10-11 | 小字体,浅蓝色,弱边框 | | 2020-11-11 | 中等字体,中蓝色,中等边框 | | 2020-12-11 | 大字体,深蓝色,粗边框 | | ... | ... | | (最新日期) | 最大字体+加粗+阴影+高亮背景 | ### 自定义选项: 1. 调整颜色方案:修改HSL参数中的色相值(214为蓝色) 2. 改变尺寸范围:调整`14 + timeRatio * 6`中的基础值和增量 3. 增强最近日期样式:修改`.recent-date`定义
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值