ajaxFileUpload上传,后台返回json在前端无法解析

本文探讨了使用ajaxFileUpload插件上传文件后返回JSON数据时遇到的问题,并提供了两种解决方案:一是前端过滤HTML标签获取纯JSON数据;二是修改源码中的eval语句。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

       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,再看一下源码就豁然开朗了

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

  • 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数据
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值