web前端入坑指南——之getJSON返回数据乱码

前话--以前痛恨交接别人的代码来维护，怕给别人填坑还不熟悉代码套路。掉坑里面挣扎后研究坑后发现还能深入学习很多东西，这数据请求返回编码的处理是其中一坑。

场景描述：

诡异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的源码，果然找到了根源。

jQuery.ajax 请求返回代码截图

果然JSON.parse解析失败，可是，可是，可是为什么jQuery不把错误信息打出来呢/(ㄒoㄒ)/~~  。

    知道了是解析的问题后，找到返回data的地方，在线解析json格式发现是有特殊的字符串，比如:

"\r"// 代表回车  

"\n"// 代表换行

"\\"// 代表反斜线字符 

"\""// 代表双引号 "

"\'" // 代表单引号   都可能导致JSON.parse解析失败。诡异2之所以把这些特殊字符上传了，因为放到data.des="xxx"的字符串里面，传输的时候是不会被特殊解析的，所以就出现匪夷所思的上传成功，获取失败。

解决方案

1、前端传输的时候encodeURI编码，获取成功后渲染数据前再解码；

2、后端帮忙处理掉特殊字符串的编码。