记录后端传json数据到前端的坑

最新推荐文章于 2024-07-27 18:51:22 发布

new一个对象777

最新推荐文章于 2024-07-27 18:51:22 发布

阅读量598

点赞数 1

分类专栏：异常大杂烩文章标签： json ajax 乱码

本文链接：https://blog.csdn.net/weixin_44475741/article/details/113994491

版权

异常大杂烩专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在做ajax异步处理的时候出现了从后台传到前台的中文不显示或者是显示中文问号的问题，琢磨了好几个小时，大量百度，能试的方法都试了一遍都不对，依旧是显示空白或问号，自我感觉找bug的能力还是要提高一下，无法找到根本问题的所在，只是盲目的乱试。好在最后让我瞎猫碰上死耗子了，hhh~那么就让我来分析一下我犯错的过程吧！
先看我的错误前台和后台的源码：

 @RequestMapping(value = "/v3")
    @ResponseBody
    public String validation(String username, String password){
        String mssg = "";

        User user = userService.login(username, password);
        if (user != null){
            mssg = "OK";
        }else{
            mssg = "用户名或密码输入错误";
        }
        System.out.println(mssg);
        return mssg;
    }

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>登录界面</title>
    <style>
        #warp{ width:100%;height:565px;}
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>

    <script>
        function a1(){
            $.post({
                url:"${pageContext.request.contextPath}/user/v3",
                data:{'username':$("#username").val()},
                success:function (data) {
                    if (data.toString()=='OK'){
                        $("#userInfo").css("color","green");
                    }else {
                        $("#userInfo").css("color","red");
                    }
                    $("#userInfo").html(data);
                },
            });
        }
    </script>

</head>
<body>

<div class="jumbotron" id="warp">
    <div class="container" align="center">
        <hr>
        <hr>
        <h2 class="text-info" style="font-family:宋体;font-weight:bold;font-size:49px">用户管理系统</h2>
        <br>
        <%--<div class="text-muted">与世界分享你的知识</div>--%>
        <br>
        <br>
        <span id="userInfo"></span>
        <form action="${pageContext.request.contextPath}/user/success" method="post" >
            <table align="center">
                <tr>
                    <td>账户：</td>
                    <td><input onblur="a1()" type="text"name="username" placeholder="例如:张三" class="form-control"/></td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td><input type="password" name="password" placeholder="*******" class="form-control" /></td>
                </tr>
            </table>
            <br>
            <div align="center"><input type="submit" value="Login" class="btn btn-primary">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="Reset" class="btn btn-primary"></div>
        </form>
        <span style="color: red;font-weight: bold">${msg}</span>
    </div>
</div>

</body>
</html>

然后这个代码的运行结果就是如下：
在这里插入图片描述
Look！！死亡中文问号，搞死我了要，再看后台输出内容

后台是可以输出中文的，这样就代表着编码格式的问题了，前台和后台的编码格式不对应导致的，这也是我后来才知道的，一开始我以为只是单方面的编码格式问题，我修改jsp的编码格式还在controller里面加上response的方法用来支持UTF-8，但是都不对，我甚至动用了springmvc自带的防乱码方案，即在spring-service.xml里面加上一段话

<mvc:annotation-driven>
        <mvc:message-converters register-defaults="true">
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <constructor-arg value="UTF-8"/>
            </bean>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="objectMapper">
                    <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
                        <property name="failOnEmptyBeans" value="false"/>
                    </bean>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>

加上这个的前提是要导一个包

 <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.12.1</version>
</dependency>

这是一个json数据解析工具，spring自带的，但是并不管用，我继续探讨百度，当我无意中看到一条回答的时候，我恍然大悟！
在这里插入图片描述
七年前的一条回答让我有了新的希望，于是我打开调试工具，查看前台和后台的编码数据格式，发现

oh,my god！神奇不，他俩居然不一样，nnd！
当我修改了controller里面的内容之后他俩就一样了。

本来时json数据，现在让我和前端统一编码了，页面的编码格式一样了，所以就可以显示中文了。
在这里插入图片描述

对比之后发现都是html格式，所以我们在后台的中文就可以输出了

芜湖，死亡问号消失了，心中略显高兴，总结一下此次遇到的bug就是后端传过来的数据编码格式和前端的页面编码格式不一致，所以导致都是问号，修改一致之后就可以了。

有价值的网站 https://www.runoob.com/http/http-content-type.html

new一个对象777

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
记录后端传json数据到前端的坑

在做ajax异步处理的时候出现了从后台传到前台的中文不显示或者是显示中文问号的问题，琢磨了好几个小时，大量百度，能试的方法都试了一遍都不对，依旧是显示空白或问号，自我感觉找bug的能力还是要提高一下，无法找到根本问题的所在，只是盲目的乱试。好在最后让我瞎猫碰上死耗子了，hhh~那么就让我来分析一下我犯错的过程吧！先看我的错误前台和后台的源码： @RequestMapping(value = "/v3") @ResponseBody public String validation(Str
复制链接

扫一扫

专栏目录