关于前后端JSON解析差异问题与思考

这篇具有很好参考价值的文章主要介绍了关于前后端JSON解析差异问题与思考。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

关于前后端JSON解析差异问题与思考

本文主要总结了作者在一次涉及流程表单的需求发布中遇到的问题及思考总结。

 

一、问题回顾

在一次涉及流程表单的需求发布时,由于表单设计的改动,需要在历史工单中的一个json字段增加一个属性,效果示意如下:
[{"key1":"value1"}] ->  [{"key1":"value1", "key2":"value2"}]
由于历史数据较多,采用了通过odc从数据库查询数据,线下开发数据处理脚本,更新数据后生成sql去线上执行,脚本示例如下。

String target = JSON.toJSONString(
      JSON.parseObject(oraData).put("key2","value2")
  )
在数据变更时未发现问题,存量工单抽查显示正常。但在第二天有业务反馈,有部分工单出现前端异常导致无法展示的问题。
根据经验分析,这类问题一般是前端在处理数据时出现异常导致,考虑到昨天对工单中的一个json字段进行了变更,初步推断应该是该字段变更后影响了前段解析。
为了验证猜测,将前端查询的接口返回数据,拷贝到在线解析json的网站中进行解析测试。结果发现页面解析失败,观察发现json中包含回车,回车删除后解析正常。在dev验证删除后数据解析正常后,应急对线上异常工单进行了处理。

 

二、问题思考

2.1 JavaScript如何解析json字符串

首先在Chrome控制台做一个简单的json解析实验,过程如下:

var str = "{\"key\":\"v1\\nv2\"}"
console.log(str)
// 打印结果 {"key":"v1\nv2"}
console.log(JSON.parse(str))
// 打印结果 {key: 'v1\nv2'}
console.log(JSON.parse(str).key)
// 打印结果 v1
// v2
经过测试,可以得到以下结论:

1)JavaScript在加载字符串时,会自动识别 斜杠 并进行反转义;

2)在进行json解析,会对值对应的字符串进行二次反转义,将\n解析为回车字符。
在查阅JSON官方对parse工具的流程说明后,印证了上述测试。

关于前后端JSON解析差异问题与思考

但在处理过程中,我们看到解释器的允许通过范围,有说明不包含control character。常见的回车、换行等字符都属于control character。

所以可以推测,在JavaScript解析json时,如果遇到control character,可能会引起异常情况。

为了验证猜想做了以下对比实验。

关于前后端JSON解析差异问题与思考

经过测试可以发现,在JavaScript使用的JSON解析器sdk中,会对于字符串中的control character进行校验,如遇到则会直接抛出异常。由于JavaScript在加载字符串时会先做一次字符转义,会将”\n“转换为回车字符,即 (byte) 13,使得解析JSON时提示异常。

这里会出现一个新的疑问,字符转义这个问题看起来是会经常出现的,为什么到现在才碰到一次呢。这里继续对JavaScript的JSON编码器进行测试。

关于前后端JSON解析差异问题与思考

经过测试可以发现,JavaScript在对字符串进行JSON编码时,会自动对字符串中的斜杠进行编码,正好对应了在JSON解码时对字符串自动解码。到这里可以明白了,同时仅使用JavaScript的JSON编码器和解码器,会自动对control character进行转义和反转义处理,不会出现异常。那在Java中呢?

2.2 Java如何解析json字符串

 

在java中,常用的JSON处理SDK是fastjson,此处以fastjson进行测试。

为了搞清楚在java中fastjson会如何解析json字符串中的control character,进行了以下实验:

Map<String, String> testMap = new HashMap<>();
        testMap.put("key", "v1\nv2");
        System.out.println("1 >> " + JSON.toJSONString(testMap));
        String testStr1 = "{\"key\":\"v1\nv2\"}";
        System.out.println("2 >> " + testStr1);
        System.out.println("3 >> " + JSON.parseObject(testStr1).getString("key"));
        String testStr2 = "{\"key\":\"v1\\nv2\"}";
        System.out.println("4 >> " + testStr2);
        System.out.println("5 >> " + JSON.parseObject(testStr2).getString("key"));

打印结果如下:


1 >> {"key":"v1\nv2"}
2 >> {"key":"v1
v2"}
3 >> v1
v2
4 >> {"key":"v1\nv2"}
5 >> v1
v2
经过测试,我们可以得出以下结论:
1)java的fastjson在进行json解析前,加载字符串时也会进行反转义处理,对于\n等control character也会转义为对应的byte值;
2)java的fastjson在对json中的字符串进行解码时,会将字符串中的转义最进行反转义处理;

3)java的fastjson在对json中的字符串进行解码时,不会受到字符串中control character的影响,可以正常提取值。

为了验证上面的推论,这里截取了fastjson关于解析String字符串的部分源码。


public final void scanString() {
        np = bp;
        hasSpecial = false;
        char ch;
        for (;;) {
            ch = next();

            if (ch == '\"') {
                break;
            }

            if (ch == EOI) {
                if (!isEOF()) {
                    putChar((char) EOI);
                    continue;
                }
                throw new JSONException("unclosed string : " + ch);
            }
            
            if (ch == '\\') {
                     if (!hasSpecial) {
                         hasSpecial = true;
                                            if (sp >= sbuf.length) {
                        int newCapcity = sbuf.length * 2;
                        if (sp > newCapcity) {
                            newCapcity = sp;
                        }
                        char[] newsbuf = new char[newCapcity];
                        System.arraycopy(sbuf, 0, newsbuf, 0, sbuf.length);
                        sbuf = newsbuf;
                    }

                    copyTo(np + 1, sp, sbuf);
                    // text.getChars(np + 1, np + 1 + sp, sbuf, 0);
                    // System.arraycopy(buf, np + 1, sbuf, 0, sp);
                }

                ch = next();

                switch (ch) {
                    case '0':
                        putChar('\0');
                        break;
                    case '1':
                        putChar('\1');
                        break;
                    case '2':
                        putChar('\2');
                        break;
                    case '3':
                        putChar('\3');
                        break;
                    case '4':
                        putChar('\4');
                        break;
                    case '5':
                        putChar('\5');
                        break;
                    case '6':
                        putChar('\6');
                        break;
                    case '7':
                        putChar('\7');
                        break;
                    case 'b': // 8
                        putChar('\b');
                        break;
                    case 't': // 9
                        putChar('\t');
                        break;
                    case 'n': // 10
                        putChar('\n');
                        break;
                    case 'v': // 11
                        putChar('\u000B');
                        break;
                    case 'f': // 12
                    case 'F':
                        putChar('\f');
                        break;
                    case 'r': // 13
                        putChar('\r');
                        break;
                    case '"': // 34
                        putChar('"');
                        break;
                    case '\'': // 39
                        putChar('\'');
                        break;
                    case '/': // 47
                        putChar('/');
                        break;
                    case '\\': // 92
                        putChar('\\');
                        break;
                    case 'x':
                        char x1 = next();
                        char x2 = next();
                        boolean hex1 = (x1 >= '0' && x1 <= '9')
                                || (x1 >= 'a' && x1 <= 'f')
                                || (x1 >= 'A' && x1 <= 'F');
                        boolean hex2 = (x2 >= '0' && x2 <= '9')
                                || (x2 >= 'a' && x2 <= 'f')
                                || (x2 >= 'A' && x2 <= 'F');
                        if (!hex1 || !hex2) {
                            throw new JSONException("invalid escape character \\x" + x1 + x2);
                        }
                        char x_char = (char) (digits[x1] * 16 + digits[x2]);
                        putChar(x_char);
                        break;
                    case 'u':
                        char u1 = next();
                        char u2 = next();
                        char u3 = next();
                        char u4 = next();                        int val = Integer.parseInt(new String(new char[] { u1, u2, u3, u4 }), 16);
                        putChar((char) val);
                        break;
                    default:
                        this.ch = ch;
                        throw new JSONException("unclosed string : " + ch);
                }
                continue;
            }

            if (!hasSpecial) {
                sp++;
                continue;
            }

            if (sp == sbuf.length) {
                putChar(ch);
            } else {
                sbuf[sp++] = ch;
            }
        }

        token = JSONToken.LITERAL_STRING;
        this.ch = next();

    }
阅读源码后,我们可以验证我们的猜想,得出以下结论:
1)fastjson在解析字符串时,会自动将遇到的转义字符进行反转义;

2)对于不需要特殊处理的字符,直接存入数据,继续处理下一字符。

2.3 Java和JavaScript交互如何出现JSON解析问题

经过上面对fastjson和JavaScript在JSON处理的区别,可以清晰的看出来本次问题是如何出现的。

起初在JavaScript进行JSON编码和解码时,会在编码时额外对\n等control character进行一次反转义。结果是在JavaScript对json字符串解码时,可以经过两次反转义再得到control character,不会触发校验引起意外情况。

原始数据:[{"key1","v1\\nv2"}]

但是在需要追加数据时,由于数据加工处理是使用java脚本进行处理的,因此出现了编码差异。fastjson在解析JSON数据时,自动将\n等转义字符进行反转义,解析为control character。但是在加工处理后,将JSON数据编码为json字符串时,仅仅对control character进行了一次处理,还原为 \n 形式。

更新后数据:[{"key1","v1\nv2"},{"key2","value2"}]

更新到数据库后,在前端查询解析时,由于在字符串加载时自动反转义出了control character,就会出现由于字符无法识别解码错误的问题。

针对该问题,后续如果还有类似需求进行处理,需要编码得到数据后,对json字符串中的所有 \ 再次进行一次反转义,使得数据可以通过两次反转义再得到实际期望字符,即可解决该问题。

期望正确数据:[{"key1","v1\\nv2"},{"key2","value2"}]

 

三、经验总结

1)在需要进行数据处理的时候,尽量保持只有一方对数据进行加工和解析。如果具备条件则数据的编码、解码全部由后端处理;或者由于需求影响,全部由前端进行编码、解码,对于多个合作方使用了未知SKD编解码数据的场景也可以复用相同的原则,可以很大程度上避免该类问题发生。

2)在开发过程中,对于数据处理类sdk的升级、替换等操作需要慎之又慎。不同sdk的数据处理方式可能存在很多细小的差别,简单替换容易为日后出现事故埋下隐患。在进行升级、替换前一定要要针对与各类可能出现的数据情况进行充分验证。

 

作者|载宁文章来源地址https://www.toymoban.com/news/detail-489778.html

到了这里,关于关于前后端JSON解析差异问题与思考的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 避坑之路 —— 前后端 json 的注意问题

    当我们在进行开发项目的时候,在前后端需要进行数据之间的传输,那么就会需要到json。而json算是字符串中的一种 1.先说一下前端的, 其实这两种都是表示前端希望能收到后端json这样的数据格式,那么我们在后端就需要注意将数据进行转换为json进行返回 2.后端 这里我就说一

    2024年02月09日
    浏览(36)
  • Qt关于QPainter绘制1px宽度图形带来的问题思考

    前段时间遇到这样一个问题,使用QPainter绘制直线的时候,设置了笔宽为1像素,但是绘制出来的线条却是2px宽度,而且设置的画笔颜色很明显是降低了透明度,不是最“纯正”的颜色。 当时就感觉非常奇怪,明明设置的画笔宽度是正常的,为啥绘制出来不是自己想要的样子。

    2023年04月20日
    浏览(41)
  • 【毕设必备】手把手带你用Python搭建一个简单的后端服务- API的创建,前后端交互的数据传递,GET,POST,JSON,FLASK

    Python是一种 流行 的高级编程语言,具有易于学习和使用的特性,被广泛应用于各种领域。 简单易学 :Python的语法清晰简洁,易于理解和学习。与其他编程语言相比,Python的语法设计非常直观,使得编程新手也能快速上手。 强大的标准库和丰富的第三方库 :Python拥有一个庞

    2024年02月04日
    浏览(174)
  • 后端用对象接收json时,对象无法获取值的问题

    在项目里做前端传json到后端处理数据时,由于传递的json比较复杂,故用对象进行接收,但在postman测试时发现无论如何对象都没法成功接收值 (这里我直接把接收到的值又回传了,方便直接在postman查看) 问题排查 1.猜测缺少@RequeBody,实际上项目controller层包含了RestControlle

    2024年02月13日
    浏览(41)
  • 【elasticsearch】关于elasticsearch的max_result_window限制问题的解决方式思考

    事情起因:我们使用es作为日志搜索引擎,客户收集到的业务日志非常之大,每次查询后,返回页数较多,由于我们web界面限制每页返回150条,当客户翻到66页之后就会报错。 文章目录 前言 二、实验 1.默认生成20条数据 2.默认查询 3.Search after查询 4.Search after二次查询 总结 前

    2024年02月06日
    浏览(36)
  • Excel将单元格中的json本文格式化

    打开Excel文件并按下ALT + F11打开Visual Basic for Applications(VBA)编辑器。 输入下面的代码 进入https://github.com/VBA-tools/VBA-JSON,下载release的最新代码 VBA编辑器,“文件”-“导入”, 导入文件 JsonConverter.bas 点击VBA编辑器的菜单栏上的\\\"工具\\\"。 选择\\\"引用\\\",然后在弹出的对话框中找到

    2024年02月14日
    浏览(49)
  • Java后端使用POST请求向mysql中插入Json数据的问题

    Cause: java.lang.IllegalStateException: Type handler was null on parameter mapping for property ‘urlParams’. It was either not specified and/or could not be found for the javaType (com.alibaba.fastjson.JSONObject) : jdbcType (null) combination.

    2024年02月07日
    浏览(41)
  • 前端异步请求并解决跨域问题(Ajax+axios框架)、后端响应多个数据(JSON)

    目录 一、前后端同步异步请求 1.同步请求: 2.异步请求: 3.跨域问题(前端问题) 4.axios框架(封装后) 二、后端向前端响应多个数据-JSON 1.同步请求:         发送一个请求,回应请求,回应的内容会覆盖浏览器中的内容,这样会 打断 前端其他的正常操作。 2.异步请求:

    2024年02月07日
    浏览(71)
  • 关于 若依框架(前后端隔离版本) 图片映射问题的解决方法 (解决跨域问题,配置代理路由)

    开发代理: 在 vue 项目内的 vue.config.js 配置文件内配置 devserver 配置,在 proxy 参数内配置两个代理路径,如 生产代理: 在 nginx 配置文件 nginx.conf 内配置 图片代理路由,类似 /proc-api/ 一样的路由 参考如下链接,去配置后端图片映射路径 1. addResourceHandler配置静态资源映射本地

    2024年02月13日
    浏览(44)
  • .NET学习笔记----关于.NET Core那些事(3)【配置文件的读取、json文件的通用解析、读取静态文件】

    appsettings.json准备 控制器中读取json 定义与配置文件中需要获取的标签结构完全一致的实体类:IConfiguration .Bind() ----反序列化 要读取的json字符串 定义的实体类 读取json 用到的json字符串 == 用到的类 Startup.cs中的配置 控制器中的代码 运行结果 当我们用《关于.NET Core那些事(2)》

    2024年02月04日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包