前后端数据交互如何避免中文乱码问题??(亲自踩坑)

我就是我 2021-08-30 11:54 597阅读 0赞

### 文章目录 ###

*  事件起因:
 *   *  1.设置Tomcat的servlet.xml的编码方式
     *  2.配置编码过滤器
     *  3.在JSP页面或者HTML页面中设置编码
     *  4.在请求中具体指定

# 事件起因: #

我在页面中要实现一个模糊查询,我用参数的序列化然后把参数回传到后端查询,一直显示无数据,一看日志文件才发现:传过来的参数(作为查询的参数)却是`???`,说明中文乱码了

> 简单分析分析了一下:
> 
> 传的参数没问题,检查了控制器和各种配置文件都没发现问题,也配置了编码过滤器,但是问题还是没解决,最后一只一直的尝试,发现:是由于没有指定Tomcat服务器的编码而导致的乱码

*  首先分析出现乱码的原因:

> 出现乱码很可能是由于我们的后端的编码和前端的编码不一致.可分为多种情况:
> 
> 1.  前端要接受后端的数据,但是前端接收数据时,没有设置解码方式,那么就使用默认的解码方式,那么就会发生错误
> 2.  后端要接受前端的数据,但是后端接收数据时,没有设置解码方式,那么就使用默认的解码方式,就发送乱码问题

不论是get方式请求数据或者post方式请求数据,我们都需要`保证数据的编码和解码的方式保证统一`

这里推荐几种我在学习路上踩的一些坑的解决方式:

## 1.设置Tomcat的servlet.xml的编码方式 ##

> 让服务器的编码方式和写代码的编码方式尽量保持统一

> 默认情bai况下，tomcat使用的的编码方式：iso8859-1  
> 修改tomcat下的conf/server.xml文件  
> 找到du如下代码：  
>   
> 这段zhi代码规定了Tomcat监听HTTP请求的端口号dao等信息。  
> 可以在这里添加一个属性：URIEncoding，将该属性值设置为UTF-8，即可让Tomcat（默认ISO-8859-1编码）以UTF-8的编码处理get请求。  
> 修改完成后：  
>

## 2.配置编码过滤器 ##

> 让我们的代码的编码方式统一,避免编码不统一的情况

<filter>
            <filter-name>CharacterEncodeingFilter</filter-name>
            <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
            <init-param>
                <param-name>encoding</param-name>
                <param-value>UTF-8</param-value>
            </init-param>
            <init-param>
                <param-name>forceEncoding</param-name>
                <param-value>true</param-value>
            </init-param>
        </filter>
    
        <filter-mapping>
        <filter-name>CharacterEncodeingFilter</filter-name>
        <url-pattern>/*</url-pattern>
        
        </filter-mapping>

## 3.在JSP页面或者HTML页面中设置编码 ##

> 设置JSP或者HTML的编码,方式编码和后端的编码不一致,导致中文乱码

<%@ page language="java" contentType="text/html; charset=UTF-8"
             pageEncoding="UTF-8"%>
    <!DOCTYPE html>

## 4.在请求中具体指定 ##

> 一般情况下,get的中文乱码问题很好解决,但是由于get请求时的参数会在会在请求路径中显示,不是很安全,一般常用的请求是post请求,因此在发送请求的地方,尽量指定好请求的方式

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>查询条件</legend>
    </fieldset>
    <form class="layui-form" method="post" id="searchFrm">
    
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">用户姓名:</label>
                <div class="layui-input-inline" style="padding: 5px">
                    <input type="text" name="realname" autocomplete="off" class="layui-input layui-input-inline"
                           placeholder="请输入用户名称" style="height: 30px;border-radius: 10px">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">登陆名称:</label>
                <div class="layui-input-inline" style="padding: 5px">
                    <input type="text" name="loginname" autocomplete="off" class="layui-input layui-input-inline"
                           placeholder="请输入用户登陆名称" style="height: 30px;border-radius: 10px">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">用户地址:</label>
                <div class="layui-input-inline" style="padding: 5px">
                    <input type="text" name="address" autocomplete="off" class="layui-input layui-input-inline"
                           placeholder="请输入用户地址" style="height: 30px;border-radius: 10px">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">用户电话:</label>
                <div class="layui-input-inline" style="padding: 5px">
                    <input type="text" name="phone" autocomplete="off" class="layui-input layui-input-inline"
                           placeholder="请输入用户电话" style="height: 30px;border-radius: 10px">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">身份证号:</label>
                <div class="layui-input-inline" style="padding: 5px">
                    <input type="text" name="identity" autocomplete="off" class="layui-input layui-input-inline"
                           placeholder="请输入身份证号" style="height: 30px;border-radius: 10px">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">性别:</label>
                <div class="layui-input-inline">
                    <input type="radio" name="sex" value="1" title="男">
                    <input type="radio" name="sex" value="0" title="女">
                </div>
                <button type="button"
                        class="layui-btn layui-btn-normal layui-icon layui-icon-search layui-btn-radius layui-btn-sm"
                        id="doSearch" style="margin-top: 4px">查询
                </button>
                <button type="reset"
                        class="layui-btn layui-btn-warm layui-icon layui-icon-refresh layui-btn-radius layui-btn-sm" style="margin-top: 4px">重置
                </button>
            </div>
        </div>
    
    </form>

`中文乱码的问题在前后端数据交互的时候经常出现,遇到的时候不要慌,按部就班的检查,另外在正常编码时,尽量的细心,避免编码的不一致,采用统一的编码会让程序的开发变的更加高效`

> 我是雷雨,一个`普本科`的学生,主要专注于Java后端和大数据开发

> 如果这篇文章有帮助到你,希望你给我一个`大大的赞`  
> 如果有什么问题,希望你能`留言`和我一起`研究`,`学习靠自觉,分享靠自愿`

> 转载注明出处  
> [https://blog.csdn.net/qq\_40742223][https_blog.csdn.net_qq_40742223]

[https_blog.csdn.net_qq_40742223]: https://blog.csdn.net/qq_40742223