SpringMVC的请求乱码解决和接收前端常用类型(五)下

简介: SpringMVC的请求乱码解决和接收前端常用类型(五)

三.五 绑定List 集合对象


与数组接收基本是一致的。


1 . 后台接收处理


@RequestMapping(value="/register")
  public String register(User user,@RequestParam(value="hobby",required=false) List<String> hobby){
    System.out.println("接收的对象:"+user.toString());
    System.out.println("爱好是:"+Arrays.toString(hobby.toArray(new String[]{})));
    return "user/list";
  }


2 . 后台显示处理


前端多传入 一个 读书 (老蝴蝶不要脸一次) 的选项。


20190809102720974.png


当然,也是可以将集合放置在User 对象里面的。


3 . 在User 对象中添加一个 List 集合属性,实现setter和getter方法。


 private List<String> hobby;
public List<String> getHobby() {
    return hobby;
  }
  public void setHobby(List<String> hobby) {
    this.hobby = hobby;
  }


4 . 后端控制台接收


@RequestMapping(value="/register")
  public String register(User user){ 
    System.out.println("接收的对象:"+user.toString());
    List<String> hobby=user.getHobby();
    System.out.println("对象接收List爱好是:"+Arrays.toString(hobby.toArray(new String[]{})));
    return "user/list";
  }


5 .前端传入数据


20190809102742366.png


6 . 后端控制台打印输出


2019080910275447.png


三.六 绑定Map 对象。


将前台传入的值,当成一个Map传入进去。 继续接着上面的前端代码往下写。


前端代码:


职业1: <input type="text" name="love1" value=""> <br/>
    职业2: <input type="text" name="love2" value=""><br/>
    职业3: <input type="text" name="love3" value=""><br/>


2 . 后端接收。


@RequestMapping(value="/register")
  public String register(User user,@RequestParam Map<String,String> map){  //此时,requestParam注解里面不能写任何值。
    System.out.println("接收的对象:"+user.toString());
    for(Map.Entry<String,String> entry:map.entrySet()){
      System.out.print("输出值:"+entry.getKey());
      System.out.print(",输出值:"+entry.getValue());
      System.out.println("\n");
    }
    return "user/list";
  }


3 . 前端数据写入


20190809102808522.png


4 . 控制台打印输出


20190809102816756.png


会发现,把所有的请求参数都放置在了Map 里面。 如果想,仅仅把 参数为love1,love2,love3的放置进去呢?


5 .将集合Map属性 写入到User 类中,并实现setter和getter方法。


private Map<String,String> loveMap;
public Map<String, String> getLoveMap() {
    return loveMap;
  }
  public void setLoveMap(Map<String, String> loveMap) {
    this.loveMap = loveMap;
  }


6 . 前台代码。 注意,这个时候有一个变化了。


<!--name便为属性.key值-->
职业1: <input type="text" name="loveMap['love1']" value=""> <br/>
    职业2: <input type="text" name="loveMap['love2']" value=""><br/>
    职业3: <input type="text" name="loveMap['love3']" value=""><br/>


7 .后端代码接收


@RequestMapping(value="/register")
  public String register(User user){ 
    System.out.println("接收的对象:"+user.toString());
    Map<String,String> loveMap=user.getLoveMap();
    for(Map.Entry<String,String> entry:loveMap.entrySet()){
      System.out.print("输出值:"+entry.getKey());
      System.out.print(",输出值:"+entry.getValue());
      System.out.println("\n");
    }
    return "user/list";
  }


8 .前台传入数据


20190809102828126.png


9 . 后端控制台打印输出


20190809103015556.png


可知,前端仅love1,love2,love3放置在了Map集合里面。


所以,最好把前端的数据放置在对象里面,便于接收。 当然,实际开发中,并不能改变User类,而应该添加一个User类的扩展 UserVo 类,在UserVo 类中添加扩展的属性。


谢谢!!!

相关文章
|
12天前
|
JavaScript 前端开发 网络协议
前端JS发起的请求能暂停吗?
在讨论前端JS发起的请求是否能暂停时,需要明确两个概念:什么状态可以被认为是“暂停”?以及什么是JS发起的请求?
72 1
前端JS发起的请求能暂停吗?
|
2天前
|
前端开发 API Python
如何在Python中接收前端POST上传的文件
如何在Python中接收前端POST上传的文件
9 2
|
15天前
|
前端开发 JavaScript 安全
TypeScript作为一种静态类型的JavaScript超集,其强大的类型系统和面向对象编程特性为微前端架构的实现提供了有力的支持
【6月更文挑战第11天】微前端架构借助TypeScript提升开发效率和代码可靠性。 TypeScript提供类型安全,防止微前端间通信出错;智能提示和自动补全加速跨代码库开发;重构支持简化代码更新。通过定义公共接口确保一致性,用TypeScript编写微前端以保证质量。集成到构建流程确保顺利构建打包。在微前端场景中,TypeScript是强有力的语言选择。
29 2
|
9天前
|
前端开发 API 数据库
面试官问:如何防止重复提交请求,99%的前端能说出来!
如何防止接口重复提交是一个常见的系统设计问题,主要目的是确保关键操作的原子性和一致性。以下是简化的摘要: 这些方法可以单独或组合使用,取决于系统规模和业务需求。例如,对于低流量系统,简单的请求唯一ID和数据库唯一索引可能足够;而对于高并发场景,可能需要结合前端禁用和后端分布式锁来提高可靠性。幂等性设计是确保接口安全的一种通用策略,适用于各种场景。
|
13天前
|
前端开发 Java Spring
Spring MVC 请求处理流程
Spring MVC 请求处理流程
12 0
|
1月前
|
前端开发 JavaScript 索引
【Web 前端】JS的几种具体异常类型(报错)
【4月更文挑战第22天】【Web 前端】JS的几种具体异常类型(报错)
|
1月前
|
前端开发 UED
【Web 前端】css盒子模型有几种类型?它们区别是什么?
【4月更文挑战第22天】【Web 前端】css盒子模型有几种类型?它们区别是什么?
|
1月前
|
JavaScript 前端开发
前端 JS 经典:JS 基础类型和 typeof
前端 JS 经典:JS 基础类型和 typeof
22 0
|
1月前
|
JSON 前端开发 JavaScript
第三章 前端发起HTTP请求
第三章 前端发起HTTP请求
|
1月前
|
JSON JavaScript Java
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
87 0