ajaxFileUpload上传文件成功后却无法解析服务器返回的json数据

Posted 2020-09-30

• ajaxFileUpload是一款很好用的文件上传插件，网上也有很多关于它的版本，但在上传文件成功后想返回json数据给前台时，却会出现无法解析json数据的情况。

　　仔细调试发现其实在向服务器提交数据后，是进入了success回调函数的，只是没有解析到json数据。那就说明服务器做出了响应的，进入了success方法的，唯一的问题就是前台接受的数据不是json格式的。

　使用console.log输出data发现并不是纯粹的json数据,其中头部多了<pre style="word-wrap: break-word; white-space: pre-wrap;">{"JsonKey":"JsonValue"}</pre>

　找到问题就很好处理了,虽然设置了data-type参数是json类型的，但依然出现了这个bug,再看一下源码就豁然开朗了

　　=====这里是源码的内容==========

if ( type == "json" ) {
          eval( "data = " + data);
    }
=======================================
原来返回的json数据是通过eval生成的，意思是接受的数据一直是text类型的，只是根据data-type的参数再转化，这是因为ajaxFileUpload是通过创建iframe层异步来上传文件的

根据这个原理可以有2种解决办法
1：在前台将<pre style="word-wrap: break-word; white-space: pre-wrap;">{"JsonKey":"JsonValue"}</pre>过滤，这样就是干净的json数据

var reg = /<pre.+?>(.+)<\/pre>/g;  
var result = data.match(reg);  
data = RegExp.$1;
2：将源码里的eval里的参数直接过滤
 if ( type == "json" ){
            data = jQuery.parseJSON(jQuery(data).text());
        }
再或者让服务器返回text类型的data再转化成json数据