上传文件返回的json数据会被提示下载问题解决方案


Posted in Javascript onDecember 03, 2014

最近项目中出现上传文件返回的json数据会被提示下载,只有在ie10+中才会出现这个问题。前端使用jQuery的插件ajaxForm提交表单,后台返回的数据格式为json。代码如下:

 后端Python:

def jsonp(func):

    """Wraps JSONified output for JSONP requests."""

    @wraps(func)

    def decorated_function(*args, **kwargs):

        callback = request.args.get('callback', False)

        temp_content =  func(*args, **kwargs)

        if isinstance(temp_content, dict):

            temp_content.setdefault('success', True)

            temp_content.setdefault('code', 200)

            try:

                temp_content = json.dumps(temp_content, indent=4)

            except UnicodeDecodeError:

                try:

                  temp_content = ujson.dumps(temp_content)

                except StandardError as e:

                  logger.exception(e)

                  temp_content = json.dumps({'success': False, 'code': 500, 'info': 'INVALID_CONTENT'})

            temp_content = cgi.escape(temp_content)

            if callback:

                # 依据 http://evilcos.me/?p=425,jsonp添加/**/头部会安全一些

                content = '/**/' + str(callback) + '(' + temp_content + ')'

                mimetype = 'application/javascript'

                headers = {'charset':'utf-8'}

                return current_app.response_class(content, mimetype=mimetype,headers=headers)

            else:

                mimetype = 'application/json'

                headers = {'charset':'utf-8'}

                content = temp_content

                return current_app.response_class(content, mimetype=mimetype,headers=headers)

        elif isinstance(temp_content, basestring):

            temp_content = cgi.escape(temp_content)

            return temp_content

        else:

            return temp_content

    return decorated_function

@mod.route('/patch/install.json', methods=['POST'])

@jsonp

def patch_install():

    return {'data': 'data'}

前端js代码:

$('#form').ajaxSubmit({

    url      : '/patch/install.json',

    type     : 'post',

    dataType : 'json',

    iframe   : true,

    success: function(res) {

        // code

    }

});

解决办法:

需要将后端返回的数据格式改成text/html格式的,如下:

def plain(func):

    """wrap text/html reponse"""

    @wraps(func)

    def _inner(*args, **kwargs):

        resp = func(*args, **kwargs)

        if isinstance(resp, dict):

            resp.setdefault('success', True)

            resp.setdefault('code', 200)

            resp = json.dumps(resp)

            resp = cgi.escape(resp)

            return current_app.response_class(resp, mimetype='text/html', headers={'charset': 'utf-8'})

        elif isinstance(resp, basestring):

            resp = cgi.escape(resp)

            return current_app.response_class(resp, mimetype='text/html', headers={'charset': 'utf-8'})

        else:

            return resp

    return _inner

@mod.route('/patch/install.json', methods=['POST'])

@plain

def patch_install():

    return {'data': 'data'}

注意:此例后端是用Python,如果项目中遇到同样问题,改成对应语言

总结,其实解决这个问题,简单的说就一句话“将后端返回的数据格式改成text/html格式的”

Javascript 相关文章推荐
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 #Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 #Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 #Javascript
JS逆序遍历实现代码
Dec 02 #Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 #Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 #Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 #Javascript
You might like
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
PDO::quote讲解
2019/01/29 PHP
一些常用的Javascript函数
2006/12/22 Javascript
JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子
2007/05/30 Javascript
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
JS判断时间段的实现代码
2017/06/14 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
python 爬取微信文章
2016/01/30 Python
python脚本设置超时机制系统时间的方法
2016/02/21 Python
Python 基础知识之字符串处理
2017/01/06 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
社区党员公开承诺书
2014/08/30 职场文书
学生打架检讨书
2014/10/20 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
学术会议领导致辞
2015/07/29 职场文书
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技