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

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

三. 数据绑定


三.一 绑定单个基本的参数


绑定单个参数时与上面的例子一样。


1 . 前台


<!-- 采用的是post提交的方式 -->
  <form action="/SpringMVC02/user/register.action" method="post">
    用户名: <input type="text" name="name"/> <br/>
    年龄:<input type="text" name="age"><br/>
    性别:<input type="text" name="sex"><br/>
    描述:<input type="text" name="description"><br/>
    <input type="submit" value="提交">
  </form>


2 . 后端接收


@RequestMapping(value="/register")
  public String register(@RequestParam(value="name") String name,
      @RequestParam(value="age") Integer age,HttpServletResponse response){
    response.setCharacterEncoding("utf-8");
    System.out.println("name:"+name);
    System.out.println("age:"+age);
    return "user/list";
  }


3 . 前台参数写入


20190809102437660.png


4 .控制台打印输出


20190809102437660.png


当然,绑定参数除了@RequestParam 注解外,还可以用@pathVariable 注解。 具体可以参数第三章和第四章的注解。


三.二 绑定POJO 对象


需要前端的name中的值与POJO 对象中的属性值保持一致。 与Struts2 的相同。


前端与上面的一致。


后端接收:


@RequestMapping(value="/register")
  public String register(User user){
    System.out.println("接收的对象:"+user.toString());
    return "user/list";
  }


前端输入:


20190809102454301.png


控制台打印输出:


20190809102501595.png


三.三 绑定关联对象


如 User 类中关联一个Dept 部门类,表示一个员工所在的部门的信息。


部门Dept 表:


package com.yjl.pojo;
/**
 @author: yuejl
 @date: 2019年2月16日 上午10:15:08
 @Description 数据库中一的一方 部门实体
*/
public class Dept {
  /**
   * @param id 部门的编号
   * @param name 部门的名称
   * @param description 部门的描述
   */
  private Integer id;
  private String name;
  private String description;
  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;
  }
  public String getDescription() {
    return description;
  }
  public void setDescription(String description) {
    this.description = description;
  }
  @Override
  public String toString() {
    return "Dept [id=" + id + ", name=" + name + ", description=" + description + "]";
  }
}


员工User 表里面添加 Dept的引用,实现setter和getter方法,并且重写User 中的toString() 方法,添加dept的打印。


//关联部门的引用
private Dept dept;


1 . 前端页面展示


<form action="/SpringMVC02/user/register.action" method="post">
    用户名: <input type="text" name="name"/> <br/>
    年龄:<input type="text" name="age"><br/>
    性别:<input type="text" name="sex"><br/>
    描述:<input type="text" name="description"><br/>
    <!-- 用属性.属性 的形式来接收。 -->
    部门名称:<input type="text" name="dept.name"><br/>
    部门描述:<input type="text" name="dept.description"><br/>
    <input type="submit" value="提交">
  </form>


2 . 后端接收与上面的一致。


@RequestMapping(value="/register")
  public String register(User user){
    System.out.println("接收的对象:"+user.toString());
    return "user/list";
  }


3 . 前台数据输入


20190809102541791.png


4 . 控制台打印输出


20190809102621192.png


三.四 绑定数组对象


以老蝴蝶的爱好为例。


1 . 前端界面


<!-- 爱好,数组接收 -->
    <input type="checkbox" name="hobby" value="读书">读书
    <input type="checkbox" name="hobby" value="编程">编程
    <input type="checkbox" name="hobby" value="打游戏">打游戏 
    <input type="checkbox" name="hobby" value="看电影">看电影 


2 . 后台接收处理。 当然也可以放置在user 里面,这里用参数处理。


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


3 .前端输入勾选


20190809102635552.png


4 . 后台打印输出,显示数组值。


20190809102643127.png


当然,也可以将hobby 数组放置在User 类里面。


5 .在User 类里面 添加 hobby 的数组属性,添加setter和getter方法


private String [] hobby;
public String[] getHobby() {
    return hobby;
  }
  public void setHobby(String[] hobby) {
    this.hobby = hobby;
  }


6 .后台接收:


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


7 .前端数据输入:


20190809102654482.png


8 .后端控制台打印输出


20190809102701814.png


相关文章
|
5天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
29 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
7天前
|
JSON 前端开发 测试技术
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
51 10
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
|
30天前
|
前端开发 JavaScript Java
前端解决axios请求的跨域问题【2步完成】
本文介绍如何通过前端配置解决跨域问题,主要针对Vue项目中的`vite.config.js`文件进行修改。作者在联调过程中遇到跨域报错
37 1
|
3月前
|
前端开发 Java 开发者
Spring MVC中的请求映射:@RequestMapping注解深度解析
在Spring MVC框架中,`@RequestMapping`注解是实现请求映射的关键,它将HTTP请求映射到相应的处理器方法上。本文将深入探讨`@RequestMapping`注解的工作原理、使用方法以及最佳实践,为开发者提供一份详尽的技术干货。
234 2
|
4月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
60 18
|
4月前
|
前端开发 JavaScript API
前端Get请求能在body上传参吗
【10月更文挑战第11天】 在浏览器环境中,GET请求的body参数会被忽略,这是因为浏览器中的XHR和fetch实现限制了这一行为。而在Node.js服务端环境中,GET请求可以在body中传递参数,因为服务端请求库没有这样的限制。实际上,GET请求不带body是HTTP标准的一部分,但在某些场景下,为了遵循RESTful规范,可以考虑通过服务端转发或BFF模式来实现复杂的参数传递。
|
4月前
|
设计模式 前端开发 Java
Spring MVC——项目创建和建立请求连接
MVC是一种软件架构设计模式,将应用分为模型、视图和控制器三部分。Spring MVC是基于MVC模式的Web框架,通过`@RequestMapping`等注解实现URL路由映射,支持GET和POST请求,并可传递参数。创建Spring MVC项目与Spring Boot类似,使用`@RestController`注解标记控制器类。
64 1
Spring MVC——项目创建和建立请求连接
|
4月前
|
JavaScript 前端开发 Python
django接收前端vue传输的formData图片数据
django接收前端vue传输的formData图片数据
87 4
|
4月前
|
存储 缓存 监控
|
4月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
84 0

热门文章

最新文章

  • 1
    springMVC前后端请求参数绑定和传递
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 4
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 5
    详解智能编码在前端研发的创新应用
  • 6
    巧用通义灵码,提升前端研发效率
  • 7
    智能编码在前端研发的创新应用
  • 8
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 9
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 10
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    51
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    141
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75