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 类中添加扩展的属性。


谢谢!!!

相关文章
|
9月前
|
JavaScript Java Maven
【SpringBoot(二)】带你认识Yaml配置文件类型、SpringMVC的资源访问路径 和 静态资源配置的原理!
SpringBoot专栏第二章,从本章开始正式进入SpringBoot的WEB阶段开发,本章先带你认识yaml配置文件和资源的路径配置原理,以方便在后面的文章中打下基础
648 4
|
JSON 前端开发 测试技术
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
1259 10
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
1082 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
前端开发 JavaScript Java
前端解决axios请求的跨域问题【2步完成】
本文介绍如何通过前端配置解决跨域问题,主要针对Vue项目中的`vite.config.js`文件进行修改。作者在联调过程中遇到跨域报错
1135 1
|
设计模式 前端开发 Java
Spring MVC——项目创建和建立请求连接
MVC是一种软件架构设计模式,将应用分为模型、视图和控制器三部分。Spring MVC是基于MVC模式的Web框架,通过`@RequestMapping`等注解实现URL路由映射,支持GET和POST请求,并可传递参数。创建Spring MVC项目与Spring Boot类似,使用`@RestController`注解标记控制器类。
268 1
Spring MVC——项目创建和建立请求连接
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
220 18
|
前端开发 Java 开发者
Spring MVC中的请求映射:@RequestMapping注解深度解析
在Spring MVC框架中,`@RequestMapping`注解是实现请求映射的关键,它将HTTP请求映射到相应的处理器方法上。本文将深入探讨`@RequestMapping`注解的工作原理、使用方法以及最佳实践,为开发者提供一份详尽的技术干货。
1606 2
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
556 4
|
前端开发 JavaScript API
前端Get请求能在body上传参吗
【10月更文挑战第11天】 在浏览器环境中,GET请求的body参数会被忽略,这是因为浏览器中的XHR和fetch实现限制了这一行为。而在Node.js服务端环境中,GET请求可以在body中传递参数,因为服务端请求库没有这样的限制。实际上,GET请求不带body是HTTP标准的一部分,但在某些场景下,为了遵循RESTful规范,可以考虑通过服务端转发或BFF模式来实现复杂的参数传递。
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
1654 14

热门文章

最新文章