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

事件起因:

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

简单分析分析了一下:

传的参数没问题,检查了控制器和各种配置文件都没发现问题,也配置了编码过滤器,但是问题还是没解决,最后一只一直的尝试,发现:是由于没有指定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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:岁月 设计师:pinMode 返回首页
评论

打赏作者

炒冷饭

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值