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


相关文章
|
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月前
|
前端开发 Java 开发者
Spring MVC中的请求映射:@RequestMapping注解深度解析
在Spring MVC框架中,`@RequestMapping`注解是实现请求映射的关键,它将HTTP请求映射到相应的处理器方法上。本文将深入探讨`@RequestMapping`注解的工作原理、使用方法以及最佳实践,为开发者提供一份详尽的技术干货。
1026 2
|
设计模式 前端开发 Java
Spring MVC——项目创建和建立请求连接
MVC是一种软件架构设计模式,将应用分为模型、视图和控制器三部分。Spring MVC是基于MVC模式的Web框架,通过`@RequestMapping`等注解实现URL路由映射,支持GET和POST请求,并可传递参数。创建Spring MVC项目与Spring Boot类似,使用`@RestController`注解标记控制器类。
139 1
Spring MVC——项目创建和建立请求连接
|
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模式来实现复杂的参数传递。
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
930 14

热门文章

最新文章

  • 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个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式