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


谢谢!!!

相关文章
|
13天前
|
JavaScript Java Maven
【SpringBoot(二)】带你认识Yaml配置文件类型、SpringMVC的资源访问路径 和 静态资源配置的原理!
SpringBoot专栏第二章,从本章开始正式进入SpringBoot的WEB阶段开发,本章先带你认识yaml配置文件和资源的路径配置原理,以方便在后面的文章中打下基础
135 3
|
8月前
|
JSON 前端开发 测试技术
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
412 10
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
|
8月前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
385 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
存储 缓存 监控
|
9月前
|
前端开发 JavaScript Java
前端解决axios请求的跨域问题【2步完成】
本文介绍如何通过前端配置解决跨域问题,主要针对Vue项目中的`vite.config.js`文件进行修改。作者在联调过程中遇到跨域报错
440 1
|
11月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
291 4
|
12月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
107 18
|
前端开发 JavaScript API
前端Get请求能在body上传参吗
【10月更文挑战第11天】 在浏览器环境中,GET请求的body参数会被忽略,这是因为浏览器中的XHR和fetch实现限制了这一行为。而在Node.js服务端环境中,GET请求可以在body中传递参数,因为服务端请求库没有这样的限制。实际上,GET请求不带body是HTTP标准的一部分,但在某些场景下,为了遵循RESTful规范,可以考虑通过服务端转发或BFF模式来实现复杂的参数传递。
|
JavaScript 前端开发 Python
django接收前端vue传输的formData图片数据
django接收前端vue传输的formData图片数据
201 4
|
设计模式 前端开发 JavaScript
Spring MVC(一)【什么是Spring MVC】
Spring MVC(一)【什么是Spring MVC】

热门文章

最新文章

  • 1
    【SpringBoot(二)】带你认识Yaml配置文件类型、SpringMVC的资源访问路径 和 静态资源配置的原理!
  • 2
    前端工程化演进之路:从手工作坊到AI驱动的智能化开发
  • 3
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
  • 4
    实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    42
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    96
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    52
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    139
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    115
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    70
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    38
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    71
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    83
  • 10
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
    163