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

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

一. 数据绑定


从前端特别是表单传递过来的数据,需要在后端进行接收。 接收时可以有不同的形式,也可以接收各种各样的类型。


二. 数据乱码


二.一 POST提交


1 . 前端html 代码


<!-- 采用的是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 . 页面输入值


20190802170753757.png


3 .后端接收代码 用 @RequestParam 注解接收。


4 . 控制台打印输出


20190809102335539.png


发现,接收过来的name 是乱码的形式。 而前台传入中文是一种很常见的方式。


二.二 POST提交乱码解决方式


SpringMVC 针对 中文乱码提供了一个过滤器, CharacterEncodingFilter, 只需要将这个过滤器配置在web.xml 中即可。放置在servlet 之前。


public class CharacterEncodingFilter
   extends OncePerRequestFilter
{
   private String encoding;
   private boolean forceEncoding = false;
}


web.xml 中配置:


<!--配置中文乱码过滤器-->
  <filter>
    <filter-name>EncodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter
    </filter-class>
    <init-param>
      <!-- 类里面有一个属性 encoding,来动态注入编码 -->
      <param-name>encoding</param-name>
      <param-value>utf-8</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>EncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>


这个时候,重启服务器,再传入时,后端接收。


20190809102345942.png


有时候,为了强制转换,通常还会再添加一个参数 forceEncoding 来决定是否强制使用 encoding 属性设置的编码格式。


 <!--配置中文乱码过滤器-->
  <filter>
    <filter-name>EncodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter
    </filter-class>
    <init-param>
      <!-- 类里面有一个属性 encoding,来动态注入编码 -->
      <param-name>encoding</param-name>
      <param-value>utf-8</param-value>
    </init-param>
    <init-param>
      <!-- 是否强制使用encoding的编码方式。 默认为false -->
      <param-name>forceEncoding</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>EncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>


当然,也可以像Servlet 时代那样,用请求 request 来处理乱码。 但不建议这么写。


  request.setCharacterEncoding("UTF-8");
//或者是
String str=newString((request.getParameter("name")).getBytes("iso-8859-1"),"utf-8")


二.三 GET 方式提交乱码的问题


即使上面配置了CharacterEncodingFilter 过滤器,当get 提交时也会出现乱码。 因为 get提交时,是tomcat 在决定的。


1 . html前端页面设置成 get提交


<form action="/SpringMVC02/user/register.action" method="get"> 


2 . 前端输入


20190809102401228.png


3 . 后端控制台接收打印


20190809102408719.png


二.四 Get方式提交乱码解决


1 .找到Tomcat的安装路径 conf/server.xml 文件里面的


20190809102416827.png


添加: URIEncoding=“UTF-8” .


 <Connector connectionTimeout="20000" port="8090" protocol="HTTP/1.1" redirectPort="8443" URIEncoding="UTF-8"/>


2 . 重启tomcat,进行打印输出。


20190809102424209.png

相关文章
|
27天前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
36 18
|
29天前
|
前端开发 JavaScript API
前端Get请求能在body上传参吗
【10月更文挑战第11天】 在浏览器环境中,GET请求的body参数会被忽略,这是因为浏览器中的XHR和fetch实现限制了这一行为。而在Node.js服务端环境中,GET请求可以在body中传递参数,因为服务端请求库没有这样的限制。实际上,GET请求不带body是HTTP标准的一部分,但在某些场景下,为了遵循RESTful规范,可以考虑通过服务端转发或BFF模式来实现复杂的参数传递。
|
1月前
|
JavaScript 前端开发 Python
django接收前端vue传输的formData图片数据
django接收前端vue传输的formData图片数据
32 4
|
1月前
|
存储 缓存 监控
|
1月前
|
移动开发 前端开发 HTML5
SharedWorker 优化前端轮询请求
【10月更文挑战第6天】
22 1
|
1月前
|
JSON 前端开发 数据格式
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
文章详细讲解了在SpringMVC中如何使用`@RequestMapping`进行路由映射,并介绍了前后端参数传递的多种方式,包括传递单个参数、多个参数、对象、数组、集合以及JSON数据,并且涵盖了参数重命名和从URL中获取参数的方法。
66 0
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
|
2月前
|
存储 前端开发 JavaScript
前端基础(十一)_函数声明及调用、函数的形参与实参、arguments参数、函数的参数类型、函数中的问题
本文介绍了JavaScript中函数的声明及调用、形参与实参的概念、arguments对象的使用、函数参数的类型以及函数中this的作用。通过示例代码详细解释了函数如何接收参数、如何处理参数个数不匹配的情况,以及函数在不同上下文中this的指向。
22 1
|
2月前
|
前端开发 JavaScript
node接收前端上传的图片,单文件、多文件同name、多文件不同name
本文介绍了在Node.js中使用multer模块接收前端上传的图片,包括单文件上传、多文件上传(同name和不同name)以及任意类型文件上传的方法。
51 0
|
28天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
119 2
|
28天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
36 0