前话--以前痛恨交接别人的代码来维护,怕给别人填坑还不熟悉代码套路。掉坑里面挣扎后研究坑后发现还能深入学习很多东西,这数据请求返回编码的处理是其中一坑。
场景描述:
诡异1、$.getJSON(url,data,callback(des:"xx")),请求的数据在控制台的network可以看到请求数据(json格式)成功返回,但是console里并没有报错;
诡异2、 数据是前端通过$.post(url,{des:"xx"},callback)提交上去的,上传成功。
$.getJSON是$.get( url, data, callback, "json" )的dataType=“json”的封装,$.get是从$ajax封装来的,$ajax又是使用原生的并兼容XMLHttpRequest和ActiveXObject的方法封装出来方便调用的形式。
一开始也不理解为什么getJSON数据请求成功了,但是页面并没有报错,就是不能走到getJSON的回调函数里面。网上解释很多也说对了就是返回的data对象有问题。但是还不能解决心中的疑惑,经过前后端大神的指点,被try-catch掉了,这种说法也能解释得通。抱着一探到底的心态查看了jQuery封装ajax处理response的源码,果然找到了根源。
果然JSON.parse解析失败,可是,可是,可是为什么jQuery不把错误信息打出来呢/(ㄒoㄒ)/~~ 。
知道了是解析的问题后,找到返回data的地方,在线解析json格式发现是有特殊的字符串,比如:
"\r"// 代表回车
"\n"// 代表换行
"\\"// 代表反斜线字符
"\""// 代表双引号 "
"\'" // 代表单引号 都可能导致JSON.parse解析失败。诡异2之所以把这些特殊字符上传了,因为放到data.des="xxx"的字符串里面,传输的时候是不会被特殊解析的,所以就出现匪夷所思的上传成功,获取失败。
解决方案
1、前端传输的时候encodeURI编码,获取成功后渲染数据前再解码;
2、后端帮忙处理掉特殊字符串的编码。